Ext JS - Cell with multiple values, with "list" of combo boxes

I'm using the Ext JS Grid component, and I've got the following fields (along with their datatypes):

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

As defined, there can be multiple Foods per user, and each food is selected from an existing Food DataStore. Displaying the Food list in the cell is easy; I just use a custom renderer. The potentially complicated part is editing those foods.

Whenever a user ed开发者_如何学编程its the Foods cell, I'd like a combo box to appear for each food item, populated from the Foods DataStore. I'll also need the user to be able to add/delete Food items, which means I'll need a small form of some sort.

Could anyone tell me the best way to accomplish this? I've perused the documentation on Ext JS (though perhaps not well-enough), but I was unable to find a good solution. I'm still fairly new to it.

Any help/suggestions are much appreciated.

Thanks,

B.J.

my suggestion would be to take editing functionality out of your grid and use it only to show data. you can edit them easily with a Ext.msg popup shown after rowclick or rowdblclick event had been fired. inside Ext.msg you can use some html tags.

you can also follow this link to learn about capturing cellclick event.

I did something similar to this, but without being able to add/delete items.

In your grid, you'll want to set the editor for the column in question to a combobox. I don't think you'll need to bother with changing the renderer at all, the combobox should take care of it for you.

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

The store that populates the grid (I called mine UserStore here) will need to use a type of 'auto' for the List field.

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'
        }
    }