Я работаю над полем со списком групп, где мне нужно динамически передавать имя группы (из его конфигурации).
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)">
нет, я хочу, чтобы это было динамически, иначе это работает ..
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>'
Похоже, работает fiddle.sencha.com/#view/editor&fiddle/2smg, не могли бы вы пояснить, чего вы пытаетесь достичь?