Extjs drop-down list box plug-in with images

There is a drop-down list with images on the official extjs website. The extended combo of extjs is called iconcombox. The official address is:
Http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
However, this iconcombobox has a disadvantage that the displayed image cannot change proportionally. If the image is too large, it will overwrite the word in the ComboBox, or the icon display is incomplete, and then read the iconcomboboxSource code, Fixed the following issues:
In Ext. UX. iconcombo. js In this file: CopyCode The Code is as follows :/**
* 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'
});
}< BR> });
} // 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);
}< BR >},
setvalue: function (value) {
Ext. UX. iconcombo. superclass. setvalue. call (this, value);
This. seticoncls ();
}< BR >}); // end of extend
// end of file

This file extends Ext. form. comboBox contains two lines of code:
lines 17th to 23. This is the display drop-down content of ComboBox, and the original display text is changed to the display image and text, there is no problem with this, but if the image is too large, you need to modify CSS.
lines 25th to 34 have the content display method set in ComboBox. extjs uses a good method, ext. domhelper. append: This is a dom api of extjs, mainly used to operate the HTML Dom. This code means to use Dom to add a new tag to the unit of wrap, the tag of this tag is Div and uses the position: absolute style. This is the cause of the problem. For the current browser, there is no way to modify the background image of the div. So I changed it to IMG and used this to modify the image size. The specific effect is as follows:
the complete code is as follows: http://xiazai.jb51.net/201003/yuanma/iconcombo.rar