Extjs drop-down list box with images

Extjs is a very good client JavaScript, and many of its spaces can be customized and scalable.

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:

In the Ext. UX. iconcombo. js file:

1 /**
2 * Ext. UX. iconcombo extension class
3 *
4 * @ author Jozef sakalos
5 * @ Version 1.0
6 *
7 * @ Class Ext. UX. iconcombo
8 * @ extends Ext. Form. ComboBox
9 * @ Constructor
10 * @ Param {object} config configuration options
11 */
12 Ext. UX. iconcombo = function (config ){
13
14 // call parent Constructor
15 Ext. UX. iconcombo. superclass. constructor. Call (this, config );
16
17 this. TPL = config. TPL |
18' <Div class = "X-combo-list-Item X-icon-combo-item {'
19 + this. iconclsfield
20 + '} "> {'
21 + this. displayfield
22 + '} </div>'
23;
24
25 this. On ({
26 render: {scope: This, FN: function (){
27 var wrap = This. El. Up ('div. X-form-field-wrapp ');
28 This. Wrap. applystyles ({position: 'relative '});
29 This. El. addclass ('x-icon-combo-input ');
30 this. Flag = ext. domhelper. append (WRAP ,{
31 Tag: 'div ', style: 'position: absolute'
32 });
33 }}
34 });
35} // end of Ext. UX. iconcombo Constructor
36
37 // extend
38 Ext. Extend (ext. UX. iconcombo, ext. Form. ComboBox ,{
39
40 seticoncls: function (){
41 var rec = This. Store. Query (this. valuefield, this. getvalue (). itemat (0 );
42 if (REC ){
43 This. Flag. classname = 'x-icon-combo-Icon '+ Rec. Get (this. iconclsfield );
44}
45 },
46
47 setvalue: function (value ){
48 Ext. UX. iconcombo. superclass. setvalue. Call (this, value );
49 This. seticoncls ();
50}
51
52}); // end of extend
53
54 // 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:

The complete code is as follows: iconcombo