Использование поля со списком в редактировании строк с использованием привязки данных

Я пытаюсь создать базовое тестовое приложение, в котором я использую сетку с редактированием строк и позволяю пользователю изменять значение поля из поля со списком. Очень распространенный вариант использования (по крайней мере, для меня), много раз применявшийся в ExtJS 4.2 и более ранних версиях. Однако я пытаюсь добиться этого с меньшим количеством кода, используя новую привязку данных и ассоциации ExtJS 5.

Я использую две модели (человек и язык), и у каждого человека должен быть один предпочтительный язык. Человек - это просто идентификатор, имя, идентификатор языка, а язык - это идентификатор, имя языка.

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',
    alias: 'model.person',

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            name: 'name'
        },
        {
            name: 'languageid',
            reference: 'MyApp.model.Language'
        }
    ]
});

Ext.define('MyApp.model.Language', {
    extend: 'Ext.data.Model',
    alias: 'model.language',

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            name: 'languagename'
        }
    ]
});

ViewModel:
Ext.define('MyApp.view.PersonsViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.persons',

    stores: {
        persons: {
            model: 'MyApp.model.Person',
            autoLoad:true
        },
        languages: {
            model: 'MyApp.model.Langugage',
            autoLoad:true
        }
    }

});

Grid (Part of larger View)
 {
            xtype: 'gridpanel',
            reference: 'grid',
            bind: {
                store: '{kamper}'
            },
            columns: [
                {
                    xtype: 'numbercolumn',
                    width: 35,
                    dataIndex: 'id',
                    text: 'Id'
                },
                {
                    xtype: 'gridcolumn',
                    width: 150,
                    dataIndex: 'langugageid',
                    text: 'Language',
                    editor: {
                        xtype: 'combobox',
                        lastQuery: '',
                        displayField: 'languagename',
                        valueField: 'id',
                        bind: {
                           selection: '{grid.selection.SomeRefToAssocStore.languagename}', /* 5.0.1 feature*/
                           value: '{grid.selection.profil}', /*should we even bind, since value is set from roweditor? */
                           store: '{languages}' /*directly to languages store or through grid store field association? */
                        }
                    }
                }
            ],
            listeners: {
                select: 'select'
            },
            features: [
                {
                    ftype: 'grouping',
                    groupHeaderTpl: [
                        'Avdeling: {name}'
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    width: 360,
                    displayInfo: true,
                    bind: {
                        store: '{kamper}'
                    }
                }
            ],
            plugins: [
                {
                    ptype: 'rowediting'
                }
            ]
        }

У меня есть некоторые вопросы в коде, но подведем итог:

Каков наилучший подход к настройке такого графического интерфейса?

Как мне установить привязку поля со списком?

Индекс данных столбца - это поле идентификатора, но я хочу отобразить значение имени языка, является ли средство визуализации столбца лучшим подходом?

Должен ли быть загружен комбинированный магазин, или я могу ожидать, что ассоциация позаботится об этом (остальный прокси-сервер удален из образца)

Должно ли комбинированное хранилище быть связано с хранилищем языков или как какое-то подхранилище ассоциации полей?

Мне не удалось найти какие-либо полные примеры с этим (сочетание rowedit, combo и привязки)

Любые указатели на «новую» передовую практику?


person Sven Tore    schedule 14.08.2014    source источник


Ответы (1)


Вам нужно установить рендерер для столбца редактора. Что-то вроде этого:

editor: {
    xtype: 'combobox',
    store: store,
    editable: false,
    valueField: 'id',
    displayField: 'name'
},
renderer: function(value) {
    var result = '';

    store.findBy(function(record) {
        if (record.getId() == value) {
            result = record.get('name');
        }
    });

    return result;
}

Показать на скрипке сенчи

person Igor Semin    schedule 15.08.2014
comment
Спасибо, это то, что я уже делаю. В моем случае я отправляю искомое значение в json с сервера, поэтому я могу просто вернуть запись. получить ('искомое значение'). Однако мне очень интересно узнать, является ли ассоциация чем-то большим, чем просто чтение данных в ExtJS 5. - person Sven Tore; 15.08.2014
comment
в общем случае для каждого типа данных - индивидуальный рендерер и редактор. редактор: getEditor. getEditor: function (запись, столбец) { switch(record.get('DataType')) { case something: Ext.create('необходимый компонент для этого типа'); } } и так далее. - person Igor Semin; 15.08.2014