Javascript Ext JS-具有多个值的单元格，带“0”；列表“；组合框的类型

我使用的是ExtJS网格组件，我有以下字段（以及它们的数据类型）：

ID（int）
名称（字符串）
食物（列表）

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

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

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

非常感谢您的帮助/建议

谢谢

---

B.J.

我的建议是将编辑功能从网格中移除，只用于显示数据。您可以在触发

rowclick

或

rowdblclick

事件后显示

Ext.msg

弹出窗口，轻松编辑它们。在

Ext.msg

中，您可以使用一些html标记

---

您还可以按照下面的步骤学习如何捕获cellclick事件。

我做了类似的操作，但无法添加/删除项目

在网格中，您需要将相关列的编辑器设置为组合框。我认为您根本不需要为更改渲染器而烦恼，combobox应该为您解决这个问题

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
    })
]

填充网格的存储（我在这里称为mine UserStore）将需要为列表字段使用一种“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.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'
        }
    }