Trying to bind a store to a ViewModel

Question

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 ?

scebotari66 · Accepted Answer · 2017-05-23T14:35:09.673

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.

edited May 23 '17 at 14:35

answered May 23 '17 at 14:24

scebotari66

3,395
2
27
34

The doc you're linking to says : *By default a single instance of this class is created*. Why must I define a schema then? Do you mean adding `schema:{namespace:'Mb.model'}` to the model should solve the issue ? – Lorenz Meyer May 23 '17 at 14:42
Yes, that should solve the issue.. The default instance doesn't have the namespace config specified. If you don't want to declare a schema, you can specify the model's full class name in the store declaration. – scebotari66 May 23 '17 at 14:51
In my Viewmodel, I replaced `model: 'rma.Detail'` with `store: 'rma.Details'`, and now I don't need any `schema` declaration any more. But now I have another problem: The `rma.Details` store is not loading, even though it is configured as `remoteFilter: true, autoLoad: true`. – Lorenz Meyer May 23 '17 at 15:01
I'll ask a new question. If I would update my code here, your answer would no longer be the answer. It is here https://stackoverflow.com/questions/44138747/why-doesnt-a-store-declared-in-a-viewmodel-get-loaded – Lorenz Meyer May 23 '17 at 15:13
Finally, I finished writing the new question. – Lorenz Meyer May 23 '17 at 15:26

Trying to bind a store to a ViewModel

1 Answers1

Linked