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

Question

我试图在extjs 3.4中的组合框中的选项之间添加一行.我可以添加该行但不能从我的远程位置填充我的数据.(如果我删除修改后的tpl选项,它会填充).

这是我的代码.我只需要在'group'字段之间添加一行,所以说我有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的回答,我想出了以下内容:

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中失败.