extjs中通過tpl實現帶表徵圖的ComboBox

在使用extjs中的combobox控制項時，通過變更tpl內容，可以很輕鬆實現提示內容，例如官方樣本的examples\form\combos.html下，可以實現combobox的選擇內容提示資訊：

既然可以顯示資訊文字，當然應該可以顯示圖片，筆者通過測試，可以這樣實現

部分代碼如下：

var AddmenuIcon=new Ext.form.ComboBox(

{

name:'AddmenuIcon',

store:new Ext.data.Store(

{

autoLoad:true,

proxy:new Ext.data.HttpProxy(

{url:'Sys_SysMenuManager_Get.asp?Action=ImgFileList'

}),

reader:new Ext.data.JsonReader(

{

},['name','url'])

}),

tpl: '<tpl for="."><div x-combo-list-item :qtip="{url}" class="x-combo-list-item"><img src="{url}" width="16" height="16">&nbsp;{name}</div></tpl>',

fieldLabel:"菜單表徵圖",

emptyText:'請選擇',

...

其中name為表徵圖的名稱，url為表徵圖的路徑位置，如下：