ExtJS5 MVVM 本地存储

Question

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

列表.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 选项。

然后你就可以按照你已经使用的方式正常绑定它了。