Показать значение магазина в сетке в Ext JS MVVM - PullRequest
Новая
       7

Показать значение магазина в сетке в Ext JS MVVM

1 голос
/ 22 января 2020

Я новичок в MVVM и Ext JS оба.

У меня есть 2 магазина: Люди и их Обязанности :

Люди: ['id', 'name','duty'],, где duty - это ключ int.

Обязанности: ['id', 'dutyName']

Я хочу отображать людей в сетке, но в одном столбце отображается не идентификатор пошлины, а название обязанности, например, не «1», а «Шеф-повар»

1) Я создал ViewModel. 

Ext.define('TestApp.ViewModels.ListViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.listVm',
    stores: {
        people: {
            type: 'PeopleStore',
            autoLoad: true
        },
        duties: {
            type: 'DutiesStore',
            autoLoad: true
        }
    },

2) Используйте эту виртуальную машину в представлении (Ext.grid.Grid) 

viewModel: {type: 'listVm'},
    bind:
        {
            store: '{people}'
        },

3) Столбец с обязанностями теперь содержит идентификаторы ('1', '2', '1' и т. д. c.) 

{
            text: 'Должность',
            dataIndex: 'duty',
            flex: 2,
            valueId: 'id'
        }

Добавление bind: {value: '{duties.dutyName}'} и воспроизведение ошибок ошибок missing a setValue method

1 Ответ

0 голосов
/ 22 января 2020

Может быть более элегантный способ сделать это (хотелось бы знать, существует ли он), но я просто использую пользовательскую функцию рендерера в этих случаях. Таким образом, ваше определение столбца будет выглядеть примерно так: 

   {
        text: 'Должность',
        dataIndex: 'duty',
        flex: 2,
        valueId: 'id',
        renderer: 'dutyColRenderer'
    }

И в вашем контроллере вы будете делать что-то вроде: 

dutyColRenderer: function(dutyId){
    var dutyStore = this.getStore('duties'),
        dutyRec = dutyStore.getById(dutyId);

    return dutyRec ? dutyRec.data.dutyName : '';    
}
...