ExtJS笔记 Reader
Readers are used to interpret data to be loaded into a Model instance or a Store - often in response to an AJAX request. In general there is usually no need to create a Reader instance directly, since a Reader is almost always used together with aProxy, and is configured using the Proxy's reader configuration property:
reader用来将数据解释到model实例或store,这里的数据常常来自ajax请求的响应。通常不需要直接创建reader对象的实例,因为reader总是与proxy一起使用,一般都是通过proxy的reader配置项来配置其属性:
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
});
The above reader is configured to consume a JSON string that looks something like this:
上面的reader配置为消费json数据,形如下面的:
{
"success": true,
"users": [
{ "name": "User 1" },
{ "name": "User 2" }
]
}
Loading Nested Data 加载嵌套的数据
Readers have the ability to automatically load deeply-nested data objects based on the associations configured on each Model. Below is an example demonstrating the flexibility of these associations in a fictional CRM system which manages a User, their Orders, OrderItems and Products. First we'll define the models:
reader具有自动加载深度嵌套的数据对象的能力--基于每个模型的associations 配置。下面是一个例子,通过一个虚构的crm系统演示了这种灵活性,crm中管理了user、orders、orderItems、products。首先我们定义模型:
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
], hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
}); Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
], belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
}); Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
], hasMany: 'OrderItem'
});
This may be a lot to take in - basically a User has many Orders, each of which is composed of several OrderItems. Finally, each OrderItem has a single Product. This allows us to consume data like this:
这里有许多信息--用户由许多订单,每个订单有几个订单条目。每个订单条目对应一个产品。我们可以像下面这样使用:
{
"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"
}
}
]
}
]
}
]
}
The JSON response is deeply nested - it returns all Users (in this case just 1 for simplicity's sake), all of the Orders for each User (again just 1 in this case), all of the OrderItems for each Order (2 order items in this case), and finally the Product associated with each OrderItem. Now we can read the data and use it as follows:
json响应是深度嵌套的--它返回所有用户,每个用户的所有订单每个订单的所有条目,以及条目关联的产品。现在我们像下面这样读取并使用它:
var store = Ext.create('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.association.BelongsTo)
var product = orderItem.getProduct(); console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
});
});
}
});
Running the code above results in the following:
运行上面的代码会得到下面的输出:
Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone
ExtJS笔记 Reader的更多相关文章
- ExtJs的Reader
ExtJs的Reader Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Modle中 结构图 Ext.data.reader.Reader 读取器 ...
- extjs笔记
1. ExtJs 结构树.. 2 2. 对ExtJs的态度.. 3 3. Ext.form概述.. 4 4. Ext.TabPanel篇.. 5 5. Functio ...
- ExtJS笔记 Ext.data.Types
This is a static class containing the system-supplied data types which may be given to a Field. Type ...
- ExtJS笔记 Store
The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and ...
- ExtJS笔记 Proxy
Proxies are used by Stores to handle the loading and saving of Model data. Usually developers will n ...
- ExtJS笔记 Tree
The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...
- ExtJS笔记 Grids
参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...
- ExtJS笔记 Form
A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can ...
- ExtJS笔记 Using Events
Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...
随机推荐
- Git分支操作
1.创建分支 git branch <分支名> 2.切换分支 git checkout <分支名> 该语句和上一个语句可以和起来用一个语句表示: git checkout -b ...
- ural 2066. Simple Expression
2066. Simple Expression Time limit: 1.0 secondMemory limit: 64 MB You probably know that Alex is a v ...
- 移动端H5页面之iphone6的适配(转)
iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H ...
- Codeforces Round #247 (Div. 2) B - Shower Line
模拟即可 #include <iostream> #include <vector> #include <algorithm> using namespace st ...
- topcoder SRM 623 DIV2 CatAndRat
解决本题的一个关键点就是当Cat进入时,此时Rat在哪个位置? 注意移动方向可以随时改变,由于是圆环,故离入口最远点的距离是pi*R,即圆的一半, 当cat进入时(cat的速度大于rat的速度,否则不 ...
- ACM 盗梦空间
盗梦空间 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入梦境之中,梦境里的时间会比现实中 ...
- ACM : HDU 2899 Strange fuction 解题报告 -二分、三分
Strange fuction Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- Android -- 滑式抽屉SlidingDrawer(非原创)
SlidingDrawer(滑动式抽屉)隐藏屏外的内容,并允许用户拖拽一个handle以显示隐藏的内容.SlidingDrawer可以在垂直或者水平使用.它由两个子视图组成:一个是用户拖拽的handl ...
- Android -- TextView、button方法详解(2)
1. button按下状态的改变 Button bt1 = null; // 声明按钮对象 bt1 = (Button) findViewById(R.id.button1); // 获取按钮对象 b ...
- C#_数据转换 实用方法
[String转Array]string str = "123asd456asd789";单字符: string[] a0 = str.Split('a');多字符: string ...