ExtJS5 MVVM本地存储

Question

如何正确使用MVVM视图模型存储？

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'
                }
            }
        }
   }
});

我得到了错误：

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

Answer 1

守则有几个问题：

1. 如果它是Sencha Cmd生成的，那么视图someList应该在view目录中。当然，当它在其他地方时，它也会工作，但是必须有一个很好的理由不遵循Sencha推荐的目录结构。这与这个问题无关。
2. Sencha建议以大写字母开头命名空间，以区别于其他变量。在这种情况下，它应该是Some，而不是some。这与这个问题无关。
3. someList扩展了TreePanel，所以它必须使用TreeStore。mlists是普通商店。这可能是问题的原因。

如果要在ViewModel中定义树存储，请使用type:'tree'配置选项对其进行配置，并且不要忘记配置树存储所必需的root选项。

然后，您可以正常绑定它，就像任何其他存储方式一样，您已经在使用。