ExtJS Combo 下拉列表正常显示HTML标签内容

解决问题:

http://www.iteye.com/problems/22617

http://www.iteye.com/problems/22681

 

原问题是,需要在combo上显示一些HTML标签,如 <a/><TestTag>xxx</TestTag>

 

 

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'], ['<MyTag /> ', '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'],['<MyTag /> ','2']]
    }),
    //这里的values.name中的name就是displayField中的值,自己修改
    tpl:'<tpl for="."><div class="x-combo-list-item">{[Ext.util.Format.htmlEncode(values.name)]}</div></tpl>'
  })

 

如图,搞定:

 

//tz