如何在ExtJS分组ComboBox的Tpl中动态传递分组名称

我来帮你搞定这个动态分组的问题！你遇到的核心问题是：在XTemplate里直接用combo.groupName无法正确获取到当前记录对应分组字段的值，因为模板的上下文是单个数据记录，不是ComboBox实例，而且直接写combo.groupName会被当成字符串处理，不会去取记录里对应字段的实际值。

问题分析 #

原来的写法<tpl for="combo.groupName" if="this.shouldShowHeader(combo.groupName)">有两个问题：

1. combo.groupName在这里是字符串（比如你的例子里是'group'），不是当前记录的group字段值；
2. XTemplate内部无法直接访问外部的ComboBox实例，需要通过模板的自定义方法来传递或获取配置。

修正后的完整代码 #

我调整了代码顺序（修复了你原来先Ext.apply再创建combo的逻辑错误），同时实现了动态分组字段的支持：

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

// 先创建数据仓库
var store = Ext.create('Ext.data.Store', {
    fields: ['group', 'key', 'name'],
    data: data
});

// 配置ComboBox
items: [{
    xtype: 'combobox',
    id: 'searchInput',
    store: store,
    multiSelect: true,
    labelWidth: 50,
    queryMode: 'local',
    displayField: 'name',
    fieldLabel: 'Choose',
    listConfig: { 
        cls: 'grouped-list',
        // 动态分组的核心模板配置
        tpl: new Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                // 动态获取当前记录的分组值，判断是否显示分组头
                '<tpl if="this.shouldShowHeader(this.getGroupValue(values))">',
                    '<div class="group-header">{[this.showHeader(this.getGroupValue(values))]}</div>',
                '</tpl>',
                '<div class="x-boundlist-item"><input type="checkbox" />{name}</div>',
            '</tpl>',
            {
                currentGroup: null,
                groupField: '', // 后续从ComboBox配置中获取

                // 初始化时绑定ComboBox的groupName配置
                init: function(combo) {
                    this.groupField = combo.groupName;
                },

                // 根据分组字段名动态获取当前记录的分组值
                getGroupValue: function(record) {
                    return record[this.groupField];
                },

                shouldShowHeader: function(group) {
                    return this.currentGroup !== group;
                },

                showHeader: function(group) {
                    this.currentGroup = group;
                    return group;
                }
            }
        )
    },
    groupName: 'group', // 这里可以动态修改分组字段名，比如改成其他字段
    listeners: {
        // 渲染完成后初始化模板的分组字段配置
        afterrender: function(combo) {
            combo.listConfig.tpl.init(combo);
        }
    }
}]

关键修改点说明 #

1. 动态获取分组值：新增getGroupValue方法，根据模板中保存的groupField（来自ComboBox的groupName配置），从当前记录中取出对应的分组值；
2. 模板初始化绑定：通过ComboBox的afterrender事件，把当前实例的groupName传递给模板，确保模板知道要使用哪个字段作为分组依据；
3. 修复代码顺序：先创建数据仓库和ComboBox实例，再配置模板，避免了原代码中Ext.apply时combo未定义的错误。

这样你就可以通过修改ComboBox的groupName配置，动态切换分组字段了，比如如果你的数据里有category字段，把groupName改成'category'就能自动按category分组显示。

内容的提问来源于stack exchange，提问作者Sunil Chaudhary