如何在ExtJS中使用代理获取数据6
我对Extjs完全陌生。我试图使用像this guide这样的代理来获取数据,但我仍然不明白。代码是这样写的。如何在ExtJS中使用代理获取数据6
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
或者我应该把它放在不同的文件中?如果它在分离的文件中,该如何做。 Fyi,当我把它放在同一个文件中时,我得到了错误。
在ExtJS的有实体店面proxy,也Ajax request您可以同时使用。
- Proxies是使用Ext.data.Store处理Ext.data.Model数据的加载和保存。通常开发人员不需要直接创建或与代理交互。一个Ext.data.Connection的
- Ajax单一实例。这个类用于与您的服务器端代码进行通信。
我已创建并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%',
}]
});
请仔细阅读下列要点了解本项目。这个架构上的link会很有帮助。
a。由于您已经创建了通用应用程序,这意味着您使用的是Ext JS 6或更高版本。为此,CMD生成的应用程序的文件夹结构如下:
app
model
store
view
classic
src
view
modern
src
view
b。 app文件夹适用于经典视图和现代视图共享的类。这通常是在应用程序/视图夹在应用程序/模型定义模型和共享控制器和视图模型。
c。在经典文件夹中的代码可以在应用文件夹引用类,但在现代文件夹不能引用代码。同样,现代文件夹中的代码可以参考文件夹中的类文件夹,但不能参考文件夹中的代码文件夹。 (这意味着在现代和经典的应用程序模型,存储,视图模型和ViewController类可以从应用程序的文件夹扩展这些类。)
d。最佳做法是在视图模型中声明商店,但如果商店配置复杂,则在商店文件夹中定义其类。
e。要在经典应用的视图模型中声明商店,示例如下所示。同样,你也会为现代应用做些什么。
//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
}
}
希望这能解决您的问题。
这是文档中给出的示例,如果没有在本地计算机上进行适当的设置,则无法立即使用它。首先让我们知道你有什么设置,你如何配置Ext js 6在你的机器上运行。如果您使用sencha cmd创建了安装程序,确保在粘贴单个文件时出现错误。 –
我已经创建了使用sencha cmd并运行良好的通用应用程序。而且我也通过文档的指导创建了登录表单。现在我需要从数据库中检索数据,所以我寻找如何做到这一点。 – Abaij