askovpen
askovpen

Reputation: 2494

ExtJS5 MVVM local store

How to properly use MVVM viewmodel store?

List.js:

Ext.define('some.List', {
    extend: 'Ext.tree.Panel',
    requires: [
        'some.ListModel'
    ],
    rootVisible : false,
    hideHeaders: true,
    viewModel: {
        type: 'list'
    },
    bind: {store:'{mlists}'},
    columns: [{
        xtype: 'treecolumn',
        dataIndex: 'name',
        flex: 1,
        sortable: false,
    }]
});

ListModel.js:

Ext.define('some.ListModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.list',
    requires: [
        'Ext.data.proxy.Ajax'
    ],
    stores: {
        mlists: {
            autoLoad: true,
            fields: [
                { name: 'id', type: 'int'},
                { name: 'name', type: 'string' },
                { name: 'count' },
                { name: 'group' }
            ],
            proxy: {
                type: 'ajax',
                api: {
                    read: 'php/lists/read.php'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'lists'
                }
            }
        }
   }
});

i get error:

Uncaught TypeError: undefined is not a function Panel.js?_dc=1404313037482:430
Ext.define.bindStore                            Panel.js?_dc=1404313037482:430
Ext.define.reconfigure                          Table.js?_dc=1404313037482:1417
Ext.define.setStore                             Table.js?_dc=1404313037482:1376
Ext.define.privates.onBindNotify                Bindable.js?_dc=1404313037482:681
Ext.define.privates.notify                      BaseBinding.js?_dc=1404313037482:83
Ext.define.privates.react                       Binding.js?_dc=1404313037482:206
Ext.define.notify                               Scheduler.js?_dc=1404313037482:394
Ext.define.onTick                               Scheduler.js?_dc=1404313037482:425
(anonymous function)                            Function.js?_dc=1404313037482:121

Upvotes: 0

Views: 2674

Answers (1)

Saki
Saki

Reputation: 5856

There are several issues with the code:

  1. If it is Sencha Cmd generated then view someList should be in view directory. Of course it would work when it is elsewhere but there must be a good reason not to follow Sencha recommended directory structure. This is not related to the issue.
  2. Sencha recommends to start namespace with a capital letter to distinguish from other variables. It should read Some, not some in this case. It is not related to the issue.
  3. someList extends TreePanel so it must use a TreeStore. mlists is normal store. It can be cause of the issue.

If you want to define a tree store in ViewModel, configure it with type:'tree' config option and do not forget to configure also root option that is mandatory for tree stores.

Then you can bind it normally as any other store the way you are already using.

Upvotes: 1

Related Questions