网格内的 Extjs ComboBox答案

【问题标题】：Extjs ComboBox inside grid网格内的 Extjs ComboBox
【发布时间】：2011-05-31 03:19:16
【问题描述】：

我有一个包含一些数据的网格（用户列表）。对于每一行，我都有许多操作，例如更新、删除、激活、暂停、查看您命名的订单。

我不想放置这么多将填充超过400-500 像素的按钮，而是要放置一个组合框，并将一个应用于每个字段的操作。

问题是我不能像那样简单地在列行中呈现组合框，或者我遗漏了什么？有人可以解释一下吗？

new Ext.grid.GridPanel({
    region: 'center',
    id: 'usersGrid',
    store: store,
    stripeRows: true,
    autoExpandColumn: 'username',
    columns: [{
            // username
        },{
            // email
        },{
            // last seen
        },{
            //  actions combo, it won't show
            header: '',
            width: 220,
            fixed: true,
            hideable: false,
            dataIndex: 'actions',
            renderer: new Ext.form.ComboBox({
                store: new Ext.data.SimpleStore({
                    id: 0,
                    fields: ['abbr', 'action'],
                    data: [
                        ['suspend', 'Suspend'],
                        ['activate', 'Activate'],
                        ['update', 'Update'],
                        ['delete', 'Delete']
                    ]
                }),
                displayField: 'action',
                valueField: 'abbr',
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                lazyRender: true,
                emptyText: 'Select action'
            })
        }
    ]
});

【问题讨论】：

标签： combobox extjs

【解决方案1】：

将网格转换为可编辑网格

在列中添加编辑器配置而不是“渲染器”。在下面找到更改后的代码。

new Ext.grid.EditorGridPanel({
    region: 'center',
    id: 'usersGrid',
    store: store,
    stripeRows: true,
    autoExpandColumn: 'username',
    columns: [{
        // username
    }, {
        // email
    }, {
        // last seen
    }, {
        //  actions combo, it won't show
        header: '',
        width: 220,
        fixed: true,
        hideable: false,
        dataIndex: 'actions',
        editor: {
            xtype: 'combo',
            store: new Ext.data.ArrayStore({
                fields: ['abbr', 'action'],
                data: [
                    ['suspend', 'Suspend'],
                    ['activate', 'Activate'],
                    ['update', 'Update'],
                    ['delete', 'Delete']
                ]
            }),
            displayField: 'action',
            valueField: 'abbr',
            mode: 'local',
            typeAhead: false,
            triggerAction: 'all',
            lazyRender: true,
            emptyText: 'Select action'
        }
    }]
});

【讨论】：

是的.. 当我们决定使用编辑器网格时，您是对的。还有一个问题是编辑器网格需要单击其单元格才能显示组合框，这不是我想要的。目前，我遇到了发布此问题的人的一些问题。我希望我的网格最初显示组合框，以便用户了解他们可以从组合框中选择操作。我正在使用 extjs 3.3.1
您应该设置单元格的样式，使其看起来像一个 ComboBox。您实际上只有一个单独的 ComboBox 来使用 EditorGrid 编辑单元格，因此您需要使您的单元格看起来像 ComboBoxes 以获得所需的效果。（无论如何，这比渲染大量 ComboBox 的执行速度要快得多。）

【解决方案2】：

您尝试完成此操作大多是正确的。您添加自定义编辑器的方式可能需要一些调整。您是否尝试过这种更改？

editor: new Ext.form.ComboBox({
                    store: new Ext.data.SimpleStore({
                        id: 0,

很遗憾，我无法确定您的代码在做什么和不工作。

您使用的是什么版本的 ExtJS？我发现的一件值得注意的事情是，我在当前的 ExtJS API 文档中没有看到任何名为 Ext.data.SimpleStore 的对象。您是否尝试过使用不同类型的数据存储？您可能想尝试为此组合使用不同类型的商店？

【讨论】：