TreePanel:为什么我必须使用Ext.crete来初始化存储

在树形面板定义中，我想写(就像我通常对网格面板所做的那样):

store: 'MyStore'

但是它只适用于

store: Ext.create('MyStore')

在第一种情况下，我有一个关于丢失存储的错误。只有第二种选择似乎有效。这给了我很多麻烦在MVC设计，我想避免。我的问题是:有没有办法将store设置为第一个选项?它看起来很奇怪，因为对于网格面板，这个存储分配正常工作。

完整代码如下:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" />
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
</head>
<body>
    <script type="text/javascript">
        Ext.onReady(function () {
            try {
                //define model
                Ext.define('MyDataModel', {
                    extend: 'Ext.data.Model',
                    fields: [
                        { name: 'nodename', mapping: 'nodename' }
                    ],
                });
                //define store
                Ext.define('MyStore', {
                    extend: 'Ext.data.TreeStore',
                    storeId: 'idStoreLryManager',
                    model: 'MyDataModel',
                    root: {
                        nodename: 'myRoot',
                        expanded: true
                    },
                    proxy: {
                        type: 'ajax',
                        url: 'test_lrymgr.json',
                        reader: {
                            type: 'json',
                            root: 'data',
                            metaProperty: 'metadata',
                            totalProperty: 'metadata.totalCount',
                            successProperty: 'metadata.success',
                            messageProperty: 'metadata.msg'
                        },
                    }
                });
                //define tree panel
                Ext.define('MyTreePanel', {
                    extend: 'Ext.tree.Panel',
                    alias: 'widget.myTreePanel',
                    store: Ext.create('MyStore'),
                    rootVisible: true,
                    columns: [
                        {
                            xtype: 'treecolumn',
                            dataIndex: 'nodename',
                            sortable: false,
                            flex: 2,
                            header: ''
                        }
                    ]
                });

                //create tree view
                Ext.createWidget('window', {
                    title: 'test',
                    layout: 'fit',
                    autoShow: true,
                    height: 360,
                    width: 200,
                    items: {
                        xtype: 'myTreePanel',
                        border: false
                    }
                });
            }
            catch (ex) {
                Ext.Msg.alert("", ex)
            }
        });

    </script>
</body>
</html>

这里是json:

{   
    "data": [   
        {
            "nodename": "AAA",
            "isvisible": true,
            "expanded": false,
            "leaf": false,
            "data": [
                {
                    "nodename": "BBB.1",
                    "isvisible": true,
                    "expanded": false,
                    "leaf": true
                },              
                {
                    "nodename": "BBB.2",
                    "isvisible": false,
                    "expanded": false,
                    "leaf": true
                }
            ]          
        },
        {
            "nodename": "BBB",
            "isvisible": true,
            "expanded": false,
            "leaf": true
        }           
    ],
    "metadata": { "success":true, "msg":"", "totalCount":1, "totalPages":1, "prevLink":"", "nextLink":""}   
}

如果您使用MVC并且您在应用程序或控制器的stores:[]数组中列出存储，那么Ext将为您创建存储并将其注册在StoreManager中。然后你可以在你的树面板中使用带有storeId的string。

例如:

// in Application.js
stores:['MyStore']
// in tree config
store:'MyStore'

。

但是，上面的代码绕过了MVC，因此您必须使用Ext.create

显式地创建存储。

相关内容

最新更新

热门标签：