javascript - ExtJS5 MVVM 本地存储

Question

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

列表.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 生成的，那么 view someList 应该位于 view 目录中。当然，当它在其他地方时它也可以工作，但必须有充分的理由不遵循 Sencha 推荐的目录结构。这与本问题无关。
2. Sencha 建议命名空间以大写字母开头，以区别于其他变量。在这种情况下，它应该读取 Some，而不是 some。与本问题无关。
3. someList 扩展了 TreePanel，因此它必须使用 TreeStore。 mlists 是普通存储。这可能是问题的原因。

如果您想在 ViewModel 中定义树存储，请使用 type:'tree' 配置选项进行配置，并且不要忘记还配置必需的 root 选项用于树木商店。

然后您可以像您已经使用的任何其他商店一样正常绑定(bind)它。