Extjs-5.1.2のストアとビューモデルを持つグリッド

Question

私はちょうどExtJSを使い始めていて、サーバーからjsonとして受け取るデータに基づいて配置されるグリッドを作成しようとしています。私は、アーキテクチャを理解するのに問題があり、グリッドビューに正しく表示するために情報を分ける方法は、バニラのJavascriptのようなもので作業するよりはるかに複雑で複雑に思えるので、

私は現在、データはここでビューにハードコードされたとき、それは働いてい：

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のに新しいものと同時に、それを学びながら何かを作成しようとするので、私は他の初心者は、この周り頭をラップすることを願ってました！

基本的な考え方は、モデル、ストア、およびビューがあることがある、と私はクラスというモデル、それらのオブジェクトのコレクション、表示されて表示されてストアとして、それを理解してきました。ストアはモデルに依存し、ビュー（少なくとも、ビルドしたグリッド）はストアに依存します。私はあまりにも多くのビューを分離することを避けようとしました、javascript関数を書いて、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ファイルからデータを読み込み、サーバからの応答を模擬することができます！ :)