데이터 저장소 내에서 더 깊은 JSON 노드를 구문 분석하는 방법 Ext.define()

Question

내 웹 사이트의 관리 목적으로 웹 기반 데스크톱 애플리케이션을 구현하려고합니다. ExtJS의 예제 인 BogusMenuModule 및 BogusModule을 다시 작성하려고 시도했을 때 내부에 Ext.define('MyDesktop.BasicWindowModule', {...})을 사용하여 JSON의 더 깊은 노드를 얻을 수 없었습니다. 첫 번째 레이어의 ID 만 가져올 수 있습니다.

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(...); 

또 다른 질문이 나온다. 모델 및 데이터 저장소 정의를 다른 .js 파일로 이동하면 myDataStore를로드 할 수 있습니까?

의견이 있으십니까?

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

내 경우 ExtJS4에서는이 기능이 작동하지 않았습니다.