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

在框架的官方网站上有一个带图片的下拉列表，其中扩展了框架的组合，名称叫做图标组合框，官方地址为：http://www .Ext js。com/learn/tutoria : extending _ Ext _ Class _ Chinese但是这个图标组合框有个缺点，就是显示的图片不能按比例变化。如果图片太大，就会出现覆盖了组合框中的字，或者出现图标显示不全种种问题，后来读了图标组合框的源代码，修改了其中的问题：在延伸文件系统UX。图标组合。射流研究…这个文件中：复制代码代码如下：/* * *分机。UX。图标组合扩展类* * @作者Jozef Sakalos * @版* * @类延伸文件系统UX。iconcomble * @扩展。形式。组合框* @构造函数* @参数{对象}配置配置选项*/ext。UX。iconcomble=function(config){//调用父构造函数延伸文件系统UX。图标组合。超级班级。构造函数。调用(这个，配置)；这个。TPL=配置。TPL | | ' div class=' x-combo-list-item x-icon-combo-item { ' this。iconclsfield ' } ' { '这个。display field“}/div”此。on({ render : { scope : this，fn : function(){ var wrap=this。埃尔。向上(' div。x-form-field-wrap’)；这个。包起来。apply style({ position : ' relative ' })；这个。埃尔。add CLaSS(' x-icon-combo-input ')；this.flag=Ext .dohelper。追加(换行，{ tag: 'div '，style : ' position : absolute ' })；}} });}//ext。UX。图标组合构造函数的结尾//扩展ext。UX。iconcombo(ext。UX。iconcombo，Ext.form.ComboBox，{ seticoncl s 3360 function(){ var rec=this。商店。查询(这个。value字段，this.getValue()).itemAt(0)；if(rec){ this。旗帜。NAmE=' x-icon-combo-icon ' rec。得到(这个。iconclsfield)；} }，setValue:函数（值){ ext。UX。图标组合。超级班级。setvalue。调用(这个，值)；这个。seticoncls()；} });//扩展结束//文件结束这个文件扩展了Ext.form.ComboBox，其中主要包含了两句代码：第17到23行，这是设置了组合框的显示下拉内容，将原来的显示文字修改成了显示图片加文字，这个没有什么问题，但是如果图片太大，就需要修改半铸钢钢性铸铁(铸造半钢)了。第25到34行，这里设置了组合框中显示的内容方式，ExtJs使用了一个很好的方式电话分机.DomHelper.append，这个是框架的一个Dom API，主要对超文本标记语言的师进行操作，这个代码的意思就是使用师在包这个单元中添加一个新的标记，这个标记的标签是div，并且使用了位置：绝对这个样式。这就是问题出现的原因。对于现在的浏览器来说，对于差异的背景图片是没有办法修改的。于是我将其修改为img，通过这个来修改图片的大小，这样就可以了。具体的效果如下

完整代码如下http://xiazai.jb51.net/201003/yuanma/iconcombo.rar