如何解析DataStore中較深的JSON節點Ext.define（）

Question

我試圖實現一個基於Web的桌面應用程序，用於管理我的網站。當我嘗試重寫作爲ExtJS示例的BogusMenuModule和BogusModule時，我無法使用Ext.define('MyDesktop.BasicWindowModule', {...})內部的myDataStore.load({callback:function(){...}})獲得更深的JSON節點。我只能得到第一層的ID。

如果myDataStore(...)不在Ext.define(...)之內，它可以工作，但問題在於它無法將參數設置爲'win'，這是一個內部變量Ext.define(...)。

爲什麼我想修改它們是我想實現一個基類模塊以便將任務欄ID傳遞給它並創建一個新的任務欄，而不是每次爲我的任務欄創建一個新的js文件。

我的意思是更深的節點是，如果只有一層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; 
    } 

}); 

任何意見或答案，將不勝感激但如果JSON看起來不起作用。

Answer 1

我想通了！添加行Ext.define

var me = this; 

的外面再

me.myDataStore.load(...); 

另一個問題出來。如果我將Models和DataStore定義移動到另一個.js文件，如何加載myDataStore？

有什麼建議嗎？

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

這個功能在我的情況下不適用於ExtJS4。