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 Combobox, or the Icon display is incomplete. Later, I read the IconComboBox source code and modified the problem:
InExt. ux. IconCombo. jsIn this file:
Copy codeThe 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-wrapp ');
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

This file extends Ext. form. ComboBox, which contains the following code:
Rows 17th to 23. This is the display drop-down content of the ComboBox, and the original display text is changed to the display image and text. This is no problem, but if the image is too large, you need to modify CSS.
Lines 25th to 34. Here we set the content display method 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:

Complete code below http://xiazai.jb51.net/201003/yuanma/iconcombo.rar