ExtJS :在分组组合框tpl中动态传递组名

Question

我正在处理一个组组合框，在这里我需要动态地传递组名(从它的配置)。

  var data = [{
           group: 'Fubar',
           key: '1',
           name: '2015 Product Development'
       }, {
           group: 'Fubar',
           key: '2',
           name: 'Message Filter'
       }, {
           group: 'Fubar',
           key: '3',
           name: '2014 Product Development (Little)'
       }, {
           group: 'Other',
           key: '4',
           name: 'Global Structure'
       }, {
           group: 'Other',
           key: '5',
           name: 'My SW'
       }];
    Ext.apply(combo, {
            listConfig: {
        tpl = new Ext.create('Ext.XTemplate',
               '<tpl for=".">',
               '<tpl for="group" if="this.shouldShowHeader(group)"><div class="group-header">{[this.showHeader(values.group)]}</div></tpl>',
               '<div class="x-boundlist-item"><input type="checkbox" />{name}</div>',
               '</tpl>', {
                   shouldShowHeader: function(group) {
                       return this.currentGroup !== group;
                   },
                   showHeader: function(group) {
                       this.currentGroup = group;
                       return group;
                   }
               });
}
});
var combo = Ext.create('Ext.data.Store', {
       fields: ['group', 'key', 'name'],
       data: data
   });
 items: [{
           xtype: 'combobox',
           id: 'searchInput',
           store: combo,
           multiSelect: true,
           labelWidth: 50,
           queryMode: 'local',
           displayField: 'name',
           fieldLabel: 'Choose',
           listConfig: {
               cls: 'grouped-list'
           },
           tpl: tpl,
groupName: 'group'
}]

我试过使用代码，但不起作用。它给了group，属性本身而不是它的价值。

<tpl for="combo.groupName" if="this.shouldShowHeader(combo.groupName)">

• 这里，组合体是正在使用的combobox实例。

Answer 1

应该以这种方式使用Tpl来获得所需的输出。

  '<tpl for=".">',
    '<tpl for="' + combo.groupName + '" if="this.shouldShowHeader(' + combo.groupName + ')"><div class="group-header">{[this.showHeader(values.' + combo.groupName + ')]}</div></tpl>',
    '<div class="x-boundlist-item"><input type="checkbox" />{name}</div>',
  '</tpl>'