Ext.form.field.ComboBox 显示图片的方法

2019独角兽企业重金招聘Python工程师标准>>>

正常情况下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;
		}
	}
})

转载于:https://my.oschina.net/u/1583086/blog/264420