在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 ||
'{'
+ this.displayfield
+ '}
'
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，通过这个来修改图片的大小，这样就可以了。具体的效果如下：
完整代码如下 http://xiazai.jb51.net/201003/yuanma/iconcombo.rar