extjs显示html页面,ExtJS Combo 下拉列表正常显示HTML标签内容

解决问题:

原问题是,需要在combo上显示一些HTML标签,如 xxx

1. 如果简单的使用combo的话,会如下图

2. 换个思路,把store里面的东西转码下看看?

var c = new Ext.form.ComboBox({

fieldLabel: 'HTML标签',

displayField: 'name',

valueField: 'value',

mode: 'local',

triggerAction: 'all',

store: new Ext.data.SimpleStore({

fields: [{

name: 'name',

convert: function (v) {

return Ext.util.Format.htmlEncode(v);

}

},

'value'],

data: [['xx', '1'], [' ', '2']]

})

})

发现还是出问题了,如图

问题的原因同学们可以看下Combo的setValue方法.

3. 于是我们可以看下Combo的源码,其实下拉列表就是一个DataView.

所以我们可以考虑在XTemplate这里做手脚

var c = new Ext.form.ComboBox({

fieldLabel:'HTML标签',

displayField:'name',

valueField:'value',

mode: 'local',

triggerAction: 'all',

store:new Ext.data.SimpleStore({

fields:['name','value'],

data:[['xx','1'],[' ','2']]

}),

//这里的values.name中的name就是displayField中的值,自己修改

tpl:'

{[Ext.util.Format.htmlEncode(values.name)]}

'

})

如图,搞定:

//tz