Sencha(Extjs) Ext.data.Store與Reader結合載入多重巢狀資料物件
阿新 • • 發佈:2018-12-24
Sencha(Extjs) Ext.data.Store與Reader結合載入多重巢狀資料物件
Ext.data.Readers常用於解析Model或Store中載入的資料,例如Ajax請求返回的資料(XML/JSON)。通過對每個Model的associations的屬性配置,Readers也可以自動載入多重巢狀(deeply-nested)的資料物件。下面舉一個CRM系統中的各個資料物件相互關聯的關係,用來說明Reader的靈活性。系統涉及User、Orders、 OrderItems和Products。首先我們定義models:
Ext.regModel("User", {
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'rest',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.regModel("Order", {
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.regModel("OrderItem", {
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.regModel("Product", {
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
這裡我們虛構消費資料如下:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
現在我們可以試著讀取和使用這些資料,方法如下:
var store = new Ext.data.Store({
model: "User"
});
store.load({
callback: function() {
//the user that was loaded
var user = store.first();
console.log("Orders for " + user.get('name') + ":")
//iterate over the Orders for each User
user.orders().each(function(order) {
console.log("Order ID: " + order.getId() + ", which contains items:");
//iterate over the OrderItems for each Order
order.orderItems().each(function(orderItem) {
//we know that the Product data is already loaded, so we can use the synchronous getProduct
//usually, we would use the asynchronous version (see Ext.data.BelongsToAssociation)
var product = orderItem.getProduct();
console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
});
});
}
});
執行結果如下:
Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone
Ext.data.Readers常用於解析Model或Store中載入的資料,例如Ajax請求返回的資料(XML/JSON)。通過對每個Model的associations的屬性配置,Readers也可以自動載入多重巢狀(deeply-nested)的資料物件。下面舉一個CRM系統中的各個資料物件相互關聯的關係,用來說明Reader的靈活性。系統涉及User、Orders、 OrderItems和Products。首先我們定義models:
Ext.regModel("User", {
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'rest',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.regModel("Order", {
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.regModel("OrderItem", {
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.regModel("Product", {
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
這裡我們虛構消費資料如下:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
現在我們可以試著讀取和使用這些資料,方法如下:
var store = new Ext.data.Store({
model: "User"
});
store.load({
callback: function() {
//the user that was loaded
var user = store.first();
console.log("Orders for " + user.get('name') + ":")
//iterate over the Orders for each User
user.orders().each(function(order) {
console.log("Order ID: " + order.getId() + ", which contains items:");
//iterate over the OrderItems for each Order
order.orderItems().each(function(orderItem) {
//we know that the Product data is already loaded, so we can use the synchronous getProduct
//usually, we would use the asynchronous version (see Ext.data.BelongsToAssociation)
var product = orderItem.getProduct();
console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
});
});
}
});
執行結果如下:
Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone