Trying to bind a store to a ViewModel

问题

I'm used to ExtJs with MVC pattern, and I'm trying to implement MVVM pattern. I'm not able to bind a store to my view.

I have a main grid, and try to open a details grid when selecting a line.

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
        (...)
    }
});

The title of the view gets bound correctly to the value of id.

But for the store, I get the errors:

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

I don't understand why the reference to the model (model: 'rma.Detail') is not recognized in the ViewModel. Using the MVC pattern I never needed to reference the model, I always referenced the store using a reference similar to rma.Details.

The main question is: How do I need to declare the model rma.Details in the ViewModel ?

Subsidiary questions are:

Is this the correct way to set the value id in the View. ({xtype: 'rma-details', viewModel: {data: {id: id}}}) ?
I'm used to define the proxy always in the store class. Here I don't have a store class anymore, because it is defined in the ViewModel. Is it correct to declare it in the model class like I did it above ?

回答1:

You need to define a schema, and then a namespace for it in the model declaration. Or, better yet, in a base model (check out the summary for schemas from the api docs).

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.

You've tried to use a shorthand name here, but because you haven't defined a schema namespace, it can't solve it to the model class.

Subsidiary responses:

Yes, you can do this.
There is no right or wrong here, in my opinion. You can declare the proxy alongside the filters, in the view model. You can also declare the store in a separate class and then use it in the viewmodel (this is the approach I use), specifying here only the configs that are bound to some kind of viewmodel data.

来源：https://stackoverflow.com/questions/44136891/trying-to-bind-a-store-to-a-viewmodel

标签

extjs

mvvm

extjs6

extjs6-classic