Question

我正在使用Ext JS Grid组件，我有以下字段（及其数据类型）：

ID (int)
Name (string)
Foods (List<string>)

根据定义，每个用户可以有多个食物，每个食物都是从现有的食物数据库中选择的。在单元格中显示食物清单很容易;我只是使用自定义渲染器。可能很复杂的部分是编辑这些食物。

每当用户编辑Foods单元格时，我都希望每个食物项目都显示一个组合框，从Foods DataStore中填充。我还需要用户能够添加/删除食物项目，这意味着我需要一种小型的形式。

有人能告诉我实现这个目标的最佳方法吗？我已经仔细阅读了Ext JS上的文档（虽然可能不够好），但我找不到一个好的解决方案。我还是比较新的。

非常感谢任何帮助/建议。

谢谢，

B.J。

Answer 1

我的建议是从网格中获取编辑功能，并仅将其用于显示数据。您可以在Ext.msg或rowclick事件被触发后显示rowdblclick弹出窗口轻松编辑它们。在Ext.msg内你可以使用一些html标签。

您还可以关注this link了解有关捕获cellclick事件的信息。

Answer 2

我做了类似的事情，但无法添加/删除项目。

在您的网格中，您需要将相关列的编辑器设置为组合框。我认为你根本不需要更换渲染器，组合框应该为你照顾它。

xtype: 'grid',
store: Ext.create('MySite.store.UserStore'),
columns: [
    { header: 'ID', dataIndex: 'id' },
    { header: 'Name', dataIndex: 'name' },
    {
        header: 'Foods', dataIndex: 'foods', minWidth: 200,
        editor: {
            xtype: 'combobox',
            store: Ext.create('MySite.store.FoodStore'),
            valueField: "food",
            displayField: "food",
            editable: true,
            maxHeight: 150,
            width: 310,
            multiSelect: true
        }
    }
],
selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

填充网格的商店（我在这里称为我的UserStore）将需要为List字段使用“auto”类型。

Ext.define('MySite.store.UserStore', {
    extend: 'Ext.data.Store',
    storeId: 'UserStore',
    autoLoad: true,
    fields: ['id', 'name', { name: 'foods', type: 'auto' }],
    proxy: {
        type: 'ajax',
        url: // your data provider
        reader: {
            type: 'json',
            root: 'items',
            successProperty: 'success',
            messageProperty: 'message'
        }
    }

Ext JS - 具有多个值的Cell，带有组合框的“列表”

2 个答案: