|
|
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 ||
'<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'
});
}}
});
} // 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
JavaScript技術：ExtJs之帶圖片的下拉列表框插件，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
