Ext.form.field.ComboBox 顯示圖片的方法

正常狀況下Combox 是不能顯示圖片的，由於它的輸入框是一個input標籤。而input輸入框是不支持html標籤的。因此要顯示圖片就要改變combox的輸入框，能夠改爲div標籤。

1. Ext.form.field.ComboBox 的屬性 fieldSubTpl 控制着輸入框的顯示。fieldSubTpl 的默認配置以下：

['<div class="{hiddenDataCls}" role="presentation"></div>', 

'<input id="{id}" type="{type}" role="{role}" {inputAttrTpl} class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"', '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>', '<tpl if="name"> name="{name}"</tpl>', '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>', '<tpl if="size"> size="{size}"</tpl>', '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>', '<tpl if="readOnly"> readonly="readonly"</tpl>', '<tpl if="disabled"> disabled="disabled"</tpl>', '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>', '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', '/>', 

{compiled: true, disableFormats: true}]

其實最後就是生成一個div和一個input標籤。

2.如今考慮要用div標籤代替input標籤，爲了避免影響原生代碼的執行，能夠把input 標籤中的type="{type}"改成type=hidden隱藏掉input標籤，而不是刪除掉。

3.在fieldSubTpl 的默認配置後加入以下代碼：

'<div id="{id}_div" type="{type}" ',
	'<tpl if="size">size="{size}" </tpl>',
	'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
	'class="{fieldCls} {typeCls}" autocomplete="off">',
'</div>'

4.如今須要複寫ComboBox 的setValue方法，每當選項改變的時候把值（這個值是顯示圖片的html標籤）賦給新加入的div標籤的屬性innerHTML，以顯示圖片。

完整代碼以下：

Ext.define('Erp.ui.filterCombox', {
	extend : 'Ext.form.field.ComboBox',
	alias : 'widget.filterCombox',
	fieldSubTpl: [
		'<div class="{hiddenDataCls}" role="presentation"></div>', 
		
		'<input id="{id}" type="hidden" role="{role}" {inputAttrTpl} class="{fieldCls}                     {typeCls} {editableCls}" autocomplete="off"', 
		'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.name)]}"</tpl>',
		'<tpl if="name"> name="{name}"</tpl>', 
		'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>', 
		'<tpl if="size"> size="{size}"</tpl>', 
		'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
		'<tpl if="readOnly"> readonly="readonly"</tpl>', 
		'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>', 
		'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', 
		'/>',
		
		'<div id="{id}_div" type="{type}" ',
		    '<tpl if="size">size="{size}" </tpl>',
		    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
		    'class="{fieldCls} {typeCls}" autocomplete="off">',
		'</div>',
		 {
		    compiled: true,
		    disableFormats: true
		 }],
	 setValue: function(value) {
		var me = this;
		me.callSuper();
		var divId = me.inputId + "_div";
		me.value = value[0].data.name;
		me.rawValue = value[0].data.text;
		if ($(divId)) {//divId 是新加入的div標籤的id。
		    $(divId).innerHTML = value[0].data.text;
		}
	}
})