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