Question

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

如果myDataStore(...)超出Ext.define(...)，则可以使用，但问题是它无法设置参数以赢得＆＃39;这是Ext.define(...)的内部变量。

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

我对更深层节点的意思是，如果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(...);

另一个问题出来了。如果我将Models和DataStore定义移动到另一个.js文件，如何加载myDataStore？

有什么建议吗？

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

在我的情况下，此功能对ExtJS4不起作用。

如何在DataStore内部解析更深层的JSON节点Ext.define（）

1 个答案: