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

Question

I'm trying to implement a web-based Desktop application for administration purpose of my website. When I tried to rewrite the BogusMenuModule and BogusModule which are examples of ExtJS, I was unable to get deeper nodes of JSON by using myDataStore.load({callback:function(){...}}) inside of Ext.define('MyDesktop.BasicWindowModule', {...}) . I'm only able to get the first layer's ID.

If myDataStore(...) is outside of Ext.define(...) it works, but the problem is that it's unable to set parameters to 'win' which is an inside variable of Ext.define(...) .

Why I'd like to modify them is that I wanna implement a base-class module in order to pass taskbar ID to it and create a new taskbar instead of creating a new js file for my taskbar every time.

What I mean by deeper nodes is that if there's only one layer in JSON, it worked fine. But it doesn't work if the JSON looks like:

{
"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
                }
            ]
        }
    }
]

}

And my modified BogusModule looks like:

 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;
    }

});

Any comment or answer would be appreciated.

Answer 1

I figured it out! Add the line outside of Ext.define

var me = this;

and then

me.myDataStore.load(...);

Another question comes out. How can I load myDataStore if I move Models and DataStore definition to another .js file?

Any suggestion?

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

This function didn't work for ExtJS4 in my case.