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

【问题标题】：Adding a dividing line in between options in a ComboBox in EXTJS3在 EXTJS3 的 ComboBox 中的选项之间添加分隔线
【发布时间】：2012-09-18 00:37:06
【问题描述】：

我正在尝试在 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>'
    });

【问题讨论】：

标签： combobox extjs3

【解决方案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 中失败。

【讨论】：

【解决方案2】：

我让它以正确的方式使用模板。

下面是正确的代码：

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,
    valueField: 'id',
    displayField: 'name',
    editable: false,
    width: 150,
    allowBlank: false,
    triggerAction: 'all',
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<tpl if="this.group != values.group">',
        '<tpl exec="this.group = values.group"></tpl>',
        '<hr><h1><span style="color:gray;">{group}</span></h1><hr>',
        '</tpl>',
        '<div class="x-combo-list-item">{name}</div>',
        '</tpl>'
    )
});

【讨论】：

【解决方案3】：

既然您询问了 Extjs3，这个扩展可能是一个更好的解决方案：http://www.sencha.com/forum/showthread.php?45412-Ext.ux.form.GroupComboBox

它是为 Extjs 2 编写的，但在我应用了帖子 15 中讨论的调整后，它在 Extjs 3 中对我来说效果很好。

请注意，这在 Extjs 4 中不起作用，关于在 Extjs 4 中执行此操作的讨论在这里：http://www.sencha.com/forum/showthread.php?134344-Grouping-Combo

【讨论】：