Extjs-5.1.2의 저장소 및 뷰 모델이있는 격자

Question

저는 ExtJS를 시작하면서 json으로 서버에서받을 데이터를 기반으로 채울 그리드를 만들려고합니다. 나는 아키텍처를 이해하는 데 어려움을 겪고 있고, 그리드 뷰에 올바르게 표시하기 위해 정보를 분리하는 방법을 사용하고 있는데, 바닐라 자바 ​​스크립트에서 작업하는 것보다 훨씬 복잡하고 복잡해 보입니다.

나는 현재 데이터가 여기에보기에 하드 코딩 된 경우는 작업이 :

Ext.define('MyApp.view.main.Main', { 
extend: 'Ext.container.Viewport', 
requires: [ 
    'MyApp.view.main.MainController', 
    'MyApp.view.main.MainModel', 

    'Ext.panel.Panel', 
    'Ext.grid.Panel' 
    ], 

    /* 
    ...Other containers and panels here 
    */ 

    xtype: 'grid', 

      width: '99%', 
      flex: 1, 

      store: { 
       fields:['name', 'email', 'address', 'hobby', 'notes'], 
       data:[ 
        { name: 'Rate', email: "rate@example.com", 
         address: "382 Kilmanjaro", hobby: "tennis", notes: "Lorem ipsum dolor.."}, 
        { name: 'Jimjam', email: "jim@example.com", 
         address: "889 McKinley", hobby: "none"} 
       ], 
       proxy: { 
        type: 'memory' 
       } 
      }, 
      columns: [ 
       { text: 'Name', dataIndex: 'name' }, 
       { text: 'Email', dataIndex: 'email'}, 
       { text: 'address', dataIndex: 'address' }, 
       { text: 'hobby', dataIndex: 'hobby'}, 
       { text: 'Notes', dataIndex: 'notes', flex: 1, cellWrap: true} 
      ] 
     }] 

하지만 내가보기 밖으로 저장하고 데이터를 이동하고, 이상적으로 JSON 파일에서 읽어 싶습니다 (그리고 나중에 GET 요청). 필자가 보았던 다른 질문에는 이것에 접근하는 여러 가지 방법이 있었지만, 모두 혼란 스럽다는 것을 알았습니다. 특히 다른 버전 (나 ExtJS 5.1.2를 사용하고 있습니다.

내 저장소와 데이터를 배치 할 위치와 뷰에 올바르게 바인딩하는 방법에 대한 올바른 지침을 알려주는 포인터가 좋습니다. 필자의 주요 이슈는 관련 Controller.js, Model.js 및 Store.js 파일의 사용과 어떤 종류의 정보가 들어 있는지에 달려 있다고 생각합니다.

Answer 1

그냥 업데이트 중입니다. ExtJS4의 부엌 싱크 예제와 오래된 문서를 점검하여 아키텍처가 어떻게 작동하는지 이해했습니다.

내 주된 문제는 ExtJS에 새로운 것이었고 동시에 그것을 배우면서 무언가를 만들려고했기 때문에 다른 초보자도이 문제를 해결할 수 있기를 바랍니다.

기본 아이디어는 모델, 저장소 및 뷰가 있고, 모델 인 클래스, 해당 개체의 컬렉션 인 저장소 및 뷰인 뷰로 이해했습니다. Store는 Model에 의존하고, View (적어도 내가 만들고 있던 격자)는 Store에 달려 있습니다. 너무 많은 뷰 분리, 자바 스크립트 함수 작성 및 initComponent 재정의를 피하려고 노력했지만이 작업을 수행하려면 정확히해야했습니다. 이 같은

그래서 내가 작성한 아키텍처 :

모델/Person.js :

Ext.define('MyApp.model.Person', { 
extend: 'Ext.data.Model', 

fields:['name', 'email', 'address', 'hobby', 'notes'], 
proxy: { 
    type: 'ajax', 
    url: 'data/UserResponse.json', 
    reader: { 
     type: 'json', 
     rootProperty: 'results', 
    } 
} 

저장/Persons.js :

Ext.define('MyApp.store.Persons', { 
    extend: 'Ext.data.Store', 
    /*Model for the store*/ 
    requires: 'MyApp.model.Person', 
    model: 'MyApp.model.Person' 
}); 

보기/주/Main.js :

Ext.define('MyApp.view.main.Main', { 
    extend: 'Ext.container.Viewport', 
    requires: [ 

     'Ext.panel.Panel', 
     'Ext.grid.Panel', 
     'MyApp.view.main.PersonGrid' 
    ], 

    xtype: 'container', 

    controller: 'main', 
    viewModel: { 
     type: 'main' 
    }, 
    layout: { 
     type: 'vbox', 
     align: 'center' 
    }, 
    width: '100%', 
    items: 
    [{ 
     xtype: 'panel', 
     flex: 1, 
     border: false, 
     width: '98%', 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: 
     [{ 
      xtype: 'panel', 
      height: 30, 
      margin: '5 5 1 5', 
      flex: 1, 
      width: '98%', 
      layout: { 
       type: 'vbox', 
       align: 'center' 
      }, 
      title: 'Users - USA', 
      collapsible: true, 
      items: [ 
      { 
       xtype: 'person-grid', 
       rootVisible: true, 
       store: 'Persons' 
      }] 
     }] 
    }] 
}); 

view/main/PersonGrid.js :

Ext.define('MyApp.view.main.PersonGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.person-grid', 

    xtype: 'grid', 

    width: '99%', 
    flex: 1, 

    columns: [ 
      { text: 'Name', dataIndex: 'name' }, 
      { text: 'Email', dataIndex: 'email'}, 
      { text: 'address', dataIndex: 'address' }, 
      { text: 'hobby', dataIndex: 'hobby'}, 
      { text: 'Notes', dataIndex: 'notes', flex: 1, cellWrap: true} 
    ], 

    initComponent: function() { 
    //initComponent taken from http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#xml-grid 
     var me = this; 

     this.callParent(); 
     this.on('afterlayout', this.loadStore, this, { 
     delay: 1, 
     single: true 
     }); 
    }, 

    loadStore: function() { 
     this.getStore().load(); 
    } 
}); 

데이터/UserResponse.json :

{ 
    "success": true, 
    "results":[ 
       { name: 'Rate', email: "rate@example.com", 
        address: "382 Kilmanjaro", hobby: "tennis", notes: "Lorem ipsum dolor.."}, 
       { name: 'Jimjam', email: "jim@example.com", 
        address: "889 McKinley", hobby: "none"} 
      ] 
} 

응용 프로그램/Application.js : 전에 시도하는 것과 가장 큰 차이점은 그 자체로 격자를 분리했다

Ext.define('MyApp.Application', { 
    extend: 'Ext.app.Application', 
    models: ['Person'], 
    stores: ['Persons'], 
    launch: function() { 
     // TODO - Launch the application 
    } 
}); 

여기에서 initComponent 함수를보고 편집하고 저장소를로드합니다. 이전에 격자와 그 구성을 items {} 배열의 다른 구성 요소에 중첩시키고 저장소를 자동로드하려고했거나 storeId 및 저장소를 그리드에 바인딩하는 다른 방법을 활용했습니다.

위의 아키텍처는 완벽하게 작동하며 json 파일의 데이터를 읽고 서버의 모의 응답을받을 수 있습니다! :)