Ext JS - Ячейка с несколькими значениями, со списком со списком

Question

Я использую компонент Ext JS Grid, и у меня есть следующие поля (вместе с их типами данных):

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

Как определено, может быть несколько продуктов на пользователя, и каждыйеда выбрана из существующего продовольственного хранилища данных.Отображение списка продуктов в ячейке легко;Я просто использую пользовательский рендер.Потенциально сложная часть - это редактирование этих продуктов.

Всякий раз, когда пользователь редактирует ячейку Foods, я бы хотел, чтобы появилось поле со списком для каждого элемента питания, заполненного из DataStore Foods.Мне также понадобится, чтобы пользователь мог добавлять / удалять продукты питания, а это значит, что мне понадобится небольшая какая-то форма.

Может кто-нибудь сказать мне, как лучше всего это сделать?Я просмотрел документацию по Ext JS (хотя, возможно, недостаточно хорошо), но не смог найти хорошего решения.Я все еще довольно новичок в этом.

Любая помощь / предложения приветствуются.

Спасибо,

BJ

Answer 1

Я сделал что-то похожее на это, но не смог добавить / удалить элементы.

В вашей сетке вы захотите установить в редакторе для рассматриваемого столбца комбинированный список.Я не думаю, что вам вообще нужно будет беспокоиться о смене рендерера, поле со списком должно позаботиться о вас.

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 здесь)нужно будет использовать тип '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'
        }
    }

Answer 2

Мое предложение было бы убрать функциональность редактирования из вашей сетки и использовать ее только для отображения данных. Вы можете легко редактировать их с помощью всплывающего окна Ext.msg, отображаемого после того, как событие rowclick или rowdblclick было запущено. внутри Ext.msg вы можете использовать некоторые HTML-теги.

Вы также можете перейти по этой ссылке , чтобы узнать о захвате cellclick события.