在 ExtJS MVVM 的网格中显示存储值答案

【问题标题】：Display store value in grid in ExtJS MVVM在 ExtJS MVVM 的网格中显示存储值
【发布时间】：2020-05-08 13:54:12
【问题描述】：

我对 MVVM 和 ExtJS 都是新手。

我有 2 家商店：人员和他们的职责：

人物：['id', 'name','duty'], 其中duty 是一个 int 键。

职责：['id', 'dutyName']

我想在网格中显示人员，但在一列中显示的不是职责 ID，而是职责名称，例如不是“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) 在视图中使用此 VM (Ext.grid.Grid)

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

3) 包含职责的列现在包含 ID（“1”、“2”、“1”等）

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

添加bind: {value: '{duties.dutyName}'} 并玩弄会抛出错误missing a setValue method

【问题讨论】：

您使用的 ExtJS 版本是什么？ valueId 属性是什么意思？我在文档中没有看到它。 bind: {value: '{duties.dutyName}'} 不工作，因为 column 没有任何价值和 getter 和 setter

标签： javascript mvvm extjs

【解决方案1】：

可能有更优雅的方式来做到这一点（很想知道它是否存在），但在这些情况下我只是使用自定义渲染器函数。因此，您的列定义将类似于：

   {
        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 : '';    
}

【讨论】：