combobox - 在 EXTJS3 的 ComboBox 中的选项之间添加分隔线

Question

我正在尝试在 extjs 3.4 中的组合框中的选项之间添加一行。我可以添加该行，但不能用我的远程位置的数据填充它。 (如果我删除修改的 tpl 选项，它就会填充)。

这是我的代码。我只需要在“组”字段之间添加一行，假设我有 3 个不同长度的不同字段，我需要将它们分开。

我刚刚开始学习模板和 api，谷歌搜索还没有多大帮助，所以在询问时。感谢人们提供的任何指导。

此外，其中一些代码尝试使用 api 或其他论坛，但没有成功。

var recipientStore = new Ext.data.Store ({
        autoload: false,
        url: '../../../messaging/inc/action.php?list=to_options',
        reader: new Ext.data.JsonReader ({
            root: 'to_options',
            id: 'id',
            fields: ['id', 'name', 'group']
        })
    });

    var setRecipient = new Ext.form.ComboBox ({
        fieldLabel: 'To',
        store: recipientStore,
        mode: 'local',
        valueField: 'id',
        displayField: 'name',
        editable: false,
        width: 150,
        triggerAction: 'all',
        value: 'group',
        tpl: '<tpl for = "."><div ext:gtip="{value}" class="x-combo-list-item">{value}</div><tpl if = "xindex == 2"><hr /></tpl></tpl>'
    });

Answer 1

从 user1637759's answer 做笔记，我想出了以下内容:

Ext.define('common.field.GroupingComboBox', {

    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.common.field.GroupingComboBox',

    constructor: function (args) {
        var me = this,
            groupField = args.groupField || "group",
            groupDisplayField = args.groupDisplayField || groupField,
            displayField = args.displayField || "name";

        args.tpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<tpl if="this.' + groupField + ' != values.' + groupField + '">',
            '<tpl exec="this.' + groupField + ' = values.' + groupField + '"></tpl>',
            '<div class="x-panel-header-default x-panel-header-text-container x-panel-header-text x-panel-header-text-default" title="{' + groupDisplayField + '}">{' + groupDisplayField + '}</div>',
            '</tpl>',
            '<div class="x-boundlist-item">{' + displayField + '}</div>',
            '</tpl>'
        );

        me.callParent(arguments);
    }
});

大致是这样的

虽然这本身不提供潜水线，但分组有助于将不同的部分分开，我相信这可能会更好。

警告:我正在使用 ExtJS 4，我无法确定我的解决方案的任何部分在 ExtJS 3 中是否会失败。