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

How to parse deeper JSON nodes inside of DataStore Ext.define()

本文关键字:深层次 节点 JSON DataStore Ext define      更新时间:2023-09-26

我试图实现一个基于web的桌面应用程序的管理目的,我的网站。当我试图重写BogusMenuModule和BogusModule是ExtJS的例子时,我无法通过使用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;
    }
});

我明白了!在Ext.define

外添加一行
var me = this;

然后

me.myDataStore.load(...);

又出现了一个问题。如果我将模型和数据存储定义移动到另一个.js文件,我如何加载我的数据存储?

任何建议吗?

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

这个函数在ExtJS4中不起作用