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

Question

我对Extjs完全陌生。我试图像在本指南中一样使用代理来获取数据，但我仍然不明白。代码是这样写的。

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中，您可以同时使用存储代理和Ajax请求。

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

我已经创建和番泻叶演示。这里我创建了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

请阅读下面的要点来理解这一点。这个关于架构的链接将是有帮助的。

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

app
    model
    store
    view
classic
    src
        view
modern
    src
        view

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

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

最佳实践是在视图模型中声明存储，但如果存储配置很复杂，则在存储文件夹中定义其类。

e.To声明存储在一个典型应用程序的视图模型中，示例如下所示。同样，你也会为现代应用程序做些什么。

//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.如果在类中定义了存储(例如，古典/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
  }
}

希望这能解决你的问题。