尝试将商店绑定到 ViewModel

Question

我习惯了使用 MVC 模式的 ExtJs，我正在尝试实现 MVVM 模式。我无法将商店绑定到我的视图。

我有一个主网格，尝试在选择行时打开一个细节网格。

detailsView = mainPanel.add({
   xtype: 'rma-details',
   viewModel: {data: {id: id}}
})

Ext.define('Mb.view.rma.Details', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.rma-details',
    requires: [
        'Mb.view.rma.DetailsController',
        'Mb.view.rma.DetailsModel'
    ],
    controller: 'rma-details',
    viewModel: {type: 'rma-details'},
    bind: {
        title: 'Retour n° {id}',
        store: '{details}'
    },
    (...)
});

Ext.define('Mb.view.rma.DetailsModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.rma-details',
    requires: ['Mb.model.rma.Detail'],
    data: {
        id: 0
    },
    stores:{
        details: {
            model: 'rma.Detail',
            filters: [{
                property: 'rma',
                value: '{id}'
            }]
        }
    }
});

Ext.define('Mb.model.rma.Detail', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'rma', type: 'int'},
        (...)
    ],
    proxy: { // cf. 2nd subsidiary question
        (...)
    }
});

视图的标题正确绑定到 id 的值。

但是对于商店，我得到错误：

[E] Ext.data.schema.Schema.lookupEntity(): No such Entity "rma.Detail".
Uncaught Error: No such Entity "rma.Detail".

我不明白为什么在 ViewModel 中无法识别对模型 (model: 'rma.Detail') 的引用。使用 MVC 模式我从不需要引用模型，我总是使用类似于 rma.Details.

的引用来引用商店

主要问题是：我需要如何在 ViewModel 中声明模型 rma.Details？

补充问题是：

这是在视图中设置值 id 的正确方法吗？ ({xtype: 'rma-details', viewModel: {data: {id: id}}}) ?
我习惯定义代理总是在店里class。在这里，我不再有商店 class，因为它是在 ViewModel 中定义的。像我上面那样在模型 class 中声明它是否正确？

Answer 1

您需要定义一个schema，然后在模型声明中为其定义一个名称空间。或者，更好的是，在基本模型中（查看 api 文档中的模式摘要）。

When describing associations between entities, it is desirable to use shorthand names that do not contain the common namespace portion. This is called the entityName as opposed to its class name. By default, the entityName is the full class name. However, if a namespace is used, the common portion can be discarded and we can derive a shorter name.

您尝试在这里使用shorthand名称，但由于您没有定义架构命名空间，因此无法解析到模型class。

辅助回复：

是的，你可以做到这一点。
在我看来，这里没有对错之分。您可以在视图模型中与过滤器一起声明代理。您还可以在单独的 class 中声明商店，然后在视图模型中使用它（这是我使用的方法），此处仅指定绑定到某种视图模型数据的配置。

尝试将商店绑定到 ViewModel

Trying to bind a store to a ViewModel

extjs

mvvm

extjs6

extjs6-classic