ExtJS : Passer le nom du groupe dans la zone de liste déroulante groupée tpl dynamiquement


Sunil Chaudhary

Je travaille sur une zone de liste déroulante de groupe où je dois transmettre dynamiquement le nom du groupe (à partir de sa configuration).

  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'
}]

J'ai essayé avec du code mais ça ne marche pas. Il donne group, la propriété elle-même au lieu de sa valeur.

<tpl for="combo.groupName" if="this.shouldShowHeader(combo.groupName)">
  • Ici, combo est l'instance de combobox utilisée.
Sunil Chaudhary

Tpl doit être utilisé de cette manière pour obtenir la sortie souhaitée.

  '<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>'

Articles connexes