Сетки с магазином и viewmodel в 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 и пытаться создать что-то, изучая его одновременно, поэтому я надеюсь, что любые другие новички могут обернуть их головами вокруг этого!

Основная идея заключается в том, что существуют Model, Store и View, и я понял это как Модель, являющуюся классом, а Store - это коллекция этих объектов, а представление - это отображение. Магазин зависит от модели, а вид (по крайней мере, сетка, которую я строю) зависит от магазина. Я пытался избежать разделения слишком большого количества просмотров, написания функций 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' 
      }] 
     }] 
    }] 
}); 

вид/основная/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 здесь, чтобы загрузить хранилище (которое я раньше не делал)! Раньше у меня была сетка и ее конфигурации, вложенные в элементы {} массив других компонентов и пытаясь автоматически загружать хранилище, или использовать storeId и другие методы привязки хранилища к сетке.

Эта архитектура отлично работает для меня, и я могу читать данные из своего json-файла и высмеивать ответы с сервера! :)