如何在 ExtJS 6 中使用代理获取数据

Question

我对 Extjs 完全陌生。我正在尝试使用this guide 中的代理获取数据，但我仍然不明白。代码是这样写的。

Ext.define('User', {
  extend: 'Ext.data.Model',
  fields: ['id', 'name', 'email']
});
//The Store contains the AjaxProxy as an inline configuration
var store = Ext.create('Ext.data.Store', {
   model: 'User',
   proxy: {
      type: 'ajax',
      url : 'users.json'
   }
});
store.load();

我的问题非常基本。这段代码是写在同一个文件中，在我的情况下，(root)/app/view/user.js 还是应该把它放在不同的文件中？如果它在单独的文件中，该怎么做。仅供参考，我把它放在同一个文件中时出错了。

Answer 1

在 ExtJs 中有商店 proxy 和 Ajax request 你可以同时使用。

1. Proxies 被 Ext.data.Store 用来处理 Ext.data.Model 数据的加载和保存。通常，开发人员不需要直接创建代理或与代理交互。
2. Ajax Ext.data.Connection 的单例实例。此类用于与您的服务器端代码进行通信。

我已经创建了 Sencha Fiddle 演示。这里我创建了 2 个本地 json 文件（user.json & user1.json）。

我正在使用存储代理（来自 user.json）和 Ext.ajax 请求（来自 user1.json）获取数据。

希望这能帮助您解决问题。

*请注意，这适用于现代和经典。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email', 'phone']
});
Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    model: 'User',
    proxy: {
        type: 'ajax',
        url: 'user.json',
        reader: {
            dataType: 'json',
            rootProperty: 'data'
        }
    }
});
Ext.create('Ext.panel.Panel', {
    width: '100%',
    renderTo: Ext.getBody(),
    padding: 15,
    items: [{
        xtype: 'button',
        margin:5,
        text: 'Get Data using Store Load',
        handler: function () {
            var gridStore = this.up().down('#grid1').getStore();
            gridStore.load(function () {
                Ext.Msg.alert('Success', 'You have get data from user.json using store.load() method..!');
            });
        }
    }, {
        xtype: 'grid',
        itemId:'grid1',
        title: 'User Data Table1',
        store: Ext.data.StoreManager.lookup('userStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: '100%',
    }, {
        xtype: 'button',
        margin:5,
        text: 'Get Data using Ajax request',
        handler: function () {
            var me = this.up(),
                gridStore = me.down('#grid2').getStore();
            me.down('#grid2').mask('Pleas wait..');
            Ext.Ajax.request({
                url: 'user1.json',
                method: 'GET',
                success: function (response) {
                    me.down('#grid2').unmask();
                    var data = Ext.decode(response.responseText);
                    gridStore.loadData(data.data);
                    Ext.Msg.alert('Success', 'You have get data from user1.json using Ext.Ajax.request method..!');
                },
                failure: function (response) {
                    me.down('#grid2').unmask();
                    //put your failure login here.
                }
            });
        }
    }, {
        xtype: 'grid',
        itemId: 'grid2',
        title: 'User Data table2',
        store: Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone']
        }),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: '100%',
    }]

});

Answer 2

请阅读以下几点来理解这一点。这个关于架构的link 会很有帮助。

一个。由于您已经创建了一个通用应用程序，这意味着您使用的是 Ext JS 6 或更高版本。为此，CMD生成的app的文件夹结构如下：

app
    model
    store
    view
classic
    src
        view
modern
    src
        view

b. app 文件夹用于经典视图和现代视图共享的类。这通常是 app/model 中的模型定义，以及 app/view 文件夹中的共享控制器和视图模型。

c。 classic 文件夹中的代码可以引用 app 文件夹中的类，但不能引用 modern 文件夹中的代码。同样，modern 文件夹中的代码可以引用 app 文件夹中的类，但不能引用 classic 文件夹中的代码。 （这意味着现代和经典应用程序中的模型、存储、视图模型和视图控制器类可以从应用程序文件夹中扩展这些类。）

d。最佳实践是在 viewmodel 中声明 store，但如果 store 配置很复杂，则在 store 文件夹中定义其类。

e.在经典应用的viewmodel中声明store，示例如下。同样，您也可以为现代应用程序执行此操作。

//MyApp/classic/src/view/main/MainModel.js
stores: {
  articles: {
    model: 'MyApp.model.MyModel',// in classic/src/model folder
    autoLoad: true,
    proxy: {
      type: 'ajax',//if it's cross-domain, use jsonp
      url : 'users.json',
      reader: {
       type: 'json', //this is default
       rootProperty: 'data'//the location in data feed from where you want to start reading the data
      }
   }
 }

}

现在在视图中绑定这个商店。例如，在网格中：

{
 xtype: 'grid',
 bind: {
   store: '{articles}'
 }
 //More code
}

f。如果 store 是在一个类中定义的（例如classic/src/store/Articles.js），那么像这样在视图模型中声明。绑定将与上述相同。

//MyApp/classic/src/view/main/MainModel.js
stores: {
  articles: {
    type: 'mystore' //this is alias of store class.
    model: 'MyApp.model.MyModel', //in classic/src/model folder
  }
}

希望这能解决您的问题。