Question

我刚刚开始使用ExtJS，并且我正在寻找创建一个网格，该网格将根据它将作为json从服务器接收的数据进行填充。我无法理解架构以及如何分离信息以正确显示在网格视图上，因为它似乎比我使用类似vanilla 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，我把它理解为一个Model是一个类，一个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函数以加载存储（我之前没有做过）！之前，我将网格及其配置嵌套在其他组件的items {}数组中，并尝试自动加载商店，或者使用storeId和其他将商店绑定到网格的方法。

上面的架构非常适合我，我可以从我的json文件中读取数据并模拟来自服务器的响应！：）

在Extjs-5.1.2中使用store和viewmodel的网格

1 个答案: