ExtJs之带图片的下拉列表框插件


Posted in Javascript onMarch 04, 2010

在ExtJs的官方网站上有一个带图片的下拉列表,其中扩展了ExtJs的Combo,名称叫做IconCombox,官方地址为:
     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
     但是这个IconComboBox有个缺点,就是显示的图片不能按比例变化。如果图片太大,就会出现覆盖了Combobox中的字,或者出现Icon显示不全种种问题,后来读了IconComboBox的源代码,修改了其中的问题:
     在Ext.ux.IconCombo.js这个文件中:

/** 
* Ext.ux.IconCombo Extension Class 
* 
* @author Jozef Sakalos 
* @version 1.0 
* 
* @class Ext.ux.IconCombo 
* @extends Ext.form.ComboBox 
* @constructor 
* @param {Object} config Configuration options 
*/ 
Ext.ux.IconCombo = function(config) { 
// call parent constructor 
Ext.ux.IconCombo.superclass.constructor.call(this, config); 
this.tpl = config.tpl || 
'<div class="x-combo-list-item x-icon-combo-item {' 
+ this.iconClsField 
+ '}">{' 
+ this.displayField 
+ '}</div>' this.on({ 
render:{scope:this, fn:function() { 
var wrap = this.el.up('div.x-form-field-wrap'); 
this.wrap.applyStyles({position:'relative'}); 
this.el.addClass('x-icon-combo-input'); 
this.flag = Ext.DomHelper.append(wrap, { 
tag: 'div', style:'position:absolute' 
}); 
}} 
}); 
} // end of Ext.ux.IconCombo constructor 
// extend 
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, { 
setIconCls: function() { 
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0); 
if(rec) { 
this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField); 
} 
}, 
setValue: function(value) { 
Ext.ux.IconCombo.superclass.setValue.call(this, value); 
this.setIconCls(); 
} 
}); // end of extend 
// end of file

这个文件扩展了Ext.form.ComboBox,其中主要包含了两句代码:
第17到23行,这是设置了ComboBox的显示下拉内容,将原来的显示文字修改成了显示图片加文字,这个没有什么问题,但是如果图片太大,就需要修改CSS了。
第25到34行,这里设置了ComboBox中显示的内容方式,ExtJs使用了一个很好的方式,Ext.DomHelper.append,这个是ExtJs的一个Dom API,主要对Html的Dom进行操作,这个代码的意思就是使用Dom在wrap这个单元中添加一个新的标记,这个标记的tag是div,并且使用了position:absolute这个样式。这就是问题出现的原因。对于现在的浏览器来说,对于div的背景图片是没有办法修改的。于是我将其修改为img,通过这个来修改图片的大小,这样就可以了。具体的效果如下:
ExtJs之带图片的下拉列表框插件    
完整代码如下 http://xiazai.3water.com/201003/yuanma/iconcombo.rar

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
css图片自适应大小
Nov 28 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 #Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 #Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 #Javascript
JavaScript类和继承 constructor属性
Mar 04 #Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 #Javascript
js 编写规范
Mar 03 #Javascript
jquery validation插件表单验证的一个例子
Mar 03 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Python设计模式之代理模式实例
2014/04/26 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
工地门卫岗位职责
2013/12/30 职场文书
学校门卫岗位职责
2014/03/16 职场文书
答谢会策划方案
2014/05/12 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS