如何在 DataStore Ext.define() 中解析更深层次的 JSON 节点

Question

我正在尝试实现一个基于 Web 的桌面应用程序来管理我的网站。当我尝试重写作为 ExtJS 的示例的 BogusMenuModule 和 BogusModule 时，我无法通过在 Ext.define('MyDesktop.BasicWindowModule', {...}) 中使用 myDataStore.load({callback:function(){...}}) 来获得更深的 JSON 节点。我只能获得第一层的ID。

如果myDataStore(...) 在Ext.define(...) 之外，它可以工作，但问题是它无法将参数设置为'win'，这是Ext.define(...) 的内部变量。

我想修改它们的原因是我想实现一个基类模块，以便将任务栏 ID 传递给它并创建一个新的任务栏，而不是每次都为我的任务栏创建一个新的 js 文件。

我所说的更深节点的意思是，如果 JSON 中只有一层，它就可以正常工作。但是如果 JSON 看起来像这样，它就不起作用：

{
"BasicWindows": [
    {
        "id": 0,
        "window": {
            "id": 0,
            "name": "ControlPanel",
            "hasButton": false,
            "configs": [
                {
                    "id": 0,
                    "title": "ControlPanel",
                    "width": 640,
                    "height": 480
                }
            ]
        }
    },
    {
        "id": 1,
        "window": {
            "id": 1,
            "name": "Customers",
            "hasButton": true,
            "configs": [
                {
                    "id": 1,
                    "title": "Customers",
                    "width": 400,
                    "height": 300,
                    "button": [
                        {
                            "text": "Submit"
                        },
                        {
                            "text": "Cancel"
                        }
                    ]
                }
            ]
        }
    },
    {
        "id": 2,
        "window": {
            "id": 2,
            "name": "Reports",
            "hasButton": false,
            "configs": [
                {
                    "id": 2,
                    "title": "Reports",
                    "width": 600,
                    "height": 400
                }
            ]
        }
    }
]

}

而我修改后的 BogusModule 看起来像：

 Ext.require([
    'Ext.data.*',
    'Ext.form.*',
    'Ext.window.Window'
]);
Ext.define('BasicWindow',{
    extend: 'Ext.data.Model',
    fields: [
           {name: 'id', type:'int'}
       ],
    hasMany : {model : 'myWindow', name : 'window'}
});

Ext.define('myWindow',{
    extend: 'Ext.data.Model',
    fields: [
           {name: 'id', type:'int'},
           {name: 'name', type: 'string'},
           {name: 'hasButton', type: 'boolean'}
       ],
    hasMany : {model : 'myConfigs', name : 'configs'},   
    belongsTo: 'BasicWindow'
});

Ext.define('myConfigs', {
    extend: 'Ext.data.Model',
    fields: [
           {name: 'id', type:'int'},
           {name: 'title', type: 'string'},
           {name: 'width', type: 'int'},
           {name: 'height', type: 'int'}
       ],
    hasMany : {model : 'myButton', name : 'button'},
    belongsTo: 'myWindow'    
});

Ext.define('myButton',{
    extend: 'Ext.data.Model',
    fields: [
           {name: 'text', type:'string'}
       ],
    belongsTo: 'myConfigs'        
});

var myDataStore = Ext.create('Ext.data.Store', {
        model: 'BasicWindow',
        proxy: {
            type: 'ajax',
            url : 'js/extjs/src/desktop/json/BasicWinConfig.json',
            reader:{ 
                type:'json',
                root: 'BasicWindows'
            }
        }
});

var windowIndex = 0;
//function GetWindowName
Ext.define('MyDesktop.BasicWindowModule', {
    extend: 'Ext.ux.desktop.Module',

    init : function(){
        this.launcher = {
            //text: 'Auto Search',
            iconCls:'bogus',
            handler : this.createWindow,
            scope: this,
            windowId:windowIndex
        };
    },

    createWindow : function(src){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('BasicWindow');
        var form = new Ext.form.Panel({
                border: false,
                fieldDefaults: {
                    labelWidth: 60
                }
            });

        if(!win){
            win = desktop.createWindow({
                        autoShow: true,
                        id: 'BasicWindow',
                        //title: 'Auto Search',
                        //width: 240,
                        //height:200,
                        //minWidth: 240,
                        //minHeight: 200,
                        layout: 'fit',
                        plain: true,
                        items: form
                });

            myDataStore.load({callback:function(){
                alert('This is inside load callback');
                myDataStore.each(function(rec) {
                    var window = rec.get('window');
                    alert(window.getId());
                    rec.each(function(conf){
                        alert(conf.getId());
                        win.add({ 
                                title: config.get('title'),
                                width: config.get('width'),
                                height: config.get('height')
                        });
                    });

                });
            }});
        }
        win.show();
        return win;
    }

});

任何评论或回答将不胜感激。

Answer 1

我想通了！在 Ext.define 之外添加行

var me = this;

然后

me.myDataStore.load(...);

又一个问题出来了。如果将模型和数据存储定义移动到另一个 .js 文件，如何加载 myDataStore？

有什么建议吗？

Ext.data.StoreManager.lookup('myDataStore');

在我的例子中，这个函数不适用于 ExtJS4。