ExtJs drop-down list box plug-in with pictures

ExtJs drop-down list box plug-in with pictures_extjs

WBOY

Release： 2016-05-16 18:33:24

Original

1257 people have browsed it

There is a drop-down list with pictures on the official website of ExtJs, which extends the Combo of ExtJs, called IconCombox, and the official address is:
http://www. extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
But this IconComboBox has a disadvantage, that is, the displayed picture cannot be changed proportionally. If the picture is too large, it will cover the words in the Combobox, or the Icon will not be fully displayed. Later, I read the source code of IconComboBox and modified the problem:
In the file Ext.ux.IconCombo.js:

Copy the code 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 || 
'{' 
 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 

This file extends Ext.form.ComboBox, which mainly contains two lines of code:
Lines 17 to 23, which sets the display drop-down content of ComboBox, replacing the original Displaying text has been changed to displaying images plus text. There is no problem with this. However, if the image is too large, the CSS needs to be modified.
Lines 25 to 34, here set the content mode displayed in the ComboBox. ExtJs uses a good method, Ext.DomHelper.append, this is a Dom API of ExtJs, which mainly operates Html Dom. The meaning of this code is to use Dom to add a new tag in the wrap unit. The tag of this tag is div, and the position:absolute style is used. That's why the problem arises. For current browsers, there is no way to modify the background image of a div. So I changed it to img, and used this to modify the size of the image, and that's it. The specific effect is as follows:

The complete code is as follows http://xiazai.jb51.net/201003/yuanma/iconcombo.rar