快捷導(dǎo)航

ExtJs之帶圖片的下拉列表框插件

更新時(shí)間：2010年03月04日 13:46:01 作者：

ExtJs是一個(gè)非常好的客戶端JavaScript，他的很多空間都可以自定義而且也可以擴(kuò)展。

在ExtJs的官方網(wǎng)站上有一個(gè)帶圖片的下拉列表，其中擴(kuò)展了ExtJs的Combo，名稱叫做IconCombox，官方地址為：
     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
     但是這個(gè)IconComboBox有個(gè)缺點(diǎn)，就是顯示的圖片不能按比例變化。如果圖片太大，就會(huì)出現(xiàn)覆蓋了Combobox中的字，或者出現(xiàn)Icon顯示不全種種問題，后來讀了IconComboBox的源代碼，修改了其中的問題：
     在Ext.ux.IconCombo.js這個(gè)文件中：

復(fù)制代碼代碼如下:

 
/** 
* 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 

這個(gè)文件擴(kuò)展了Ext.form.ComboBox，其中主要包含了兩句代碼：
第17到23行，這是設(shè)置了ComboBox的顯示下拉內(nèi)容，將原來的顯示文字修改成了顯示圖片加文字，這個(gè)沒有什么問題，但是如果圖片太大，就需要修改CSS了。
第25到34行，這里設(shè)置了ComboBox中顯示的內(nèi)容方式，ExtJs使用了一個(gè)很好的方式，Ext.DomHelper.append，這個(gè)是ExtJs的一個(gè)Dom API，主要對(duì)Html的Dom進(jìn)行操作，這個(gè)代碼的意思就是使用Dom在wrap這個(gè)單元中添加一個(gè)新的標(biāo)記，這個(gè)標(biāo)記的tag是div，并且使用了position:absolute這個(gè)樣式。這就是問題出現(xiàn)的原因。對(duì)于現(xiàn)在的瀏覽器來說，對(duì)于div的背景圖片是沒有辦法修改的。于是我將其修改為img，通過這個(gè)來修改圖片的大小，這樣就可以了。具體的效果如下：