extjs中元数据_Extjs中Store小总结
http://blog.csdn.net/without0815/article/details/7798170
1.什么是store?
Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类)
最终主要用于提供给panel去显示.
Store由Proxy(数据源)和DataReader(解读数据)组成。
一.(Proxy)数据源:一般是后台的值,习惯性的把它转换成json对象给store(注:个人理解)
二.(DataReader)读取数据:获得了数据后需要解析数据,DataReader(fields属性其实是Record对象的)解析数据并指定格式.
三.store存储好的数据最后交给panel
2.store中重要的属性和方法
属性:data、proxy、reader、url、root ....
方法:load
1、如果配置了data,则proxy和url无效,且不需要调用load方法来生成Record集合
1 var store=newExt.data.ArrayStore({2 fields: ['DEPTNO', 'DNAME', 'LOC'],3 data:Ext.datas.mess //引用data.js 数据
4 });
2、如果没有配置data,则必须设置proxy或url,或两者都设置。此时,如果没有将autoLoad设置为true,
那么需要手动进行load方法的调用。就是为了得到数组、Json或Xml等格式的数据。
例子:读取Json格式的数据
1 Ext.define("ExtApp.store.StudentList",{2 extend:"Ext.data.Store",3 model:"ExtApp.model.UserinfoM",4 autoLoad:{start:0,limit:3}, //分页要用的
5 pageSize:3,6 proxy:{7 type:"ajax",8 url : 'queryStudents.action',9 reader:{10 type:"json",11 root:"rows",12 totalProperty:"results"
13 }14 }15 });
http://www.cnblogs.com/hdchild/archive/2009/11/17/1605011.html
3.store中读取数据的几种方式
ArrayReader JsonReader XmlReader
ArrayReader :这是数组类型的数据,数据形式如下:
[ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ]
我们要定义这样的数据类型
var MyRecord = Ext.data.Record.create([
{name: 'title', mapping:1}, //对应'测试'
{name: 'username', mapping:2},//对应'小王'
{name: 'loginTimes', type:3}//对应'3'
]);
这里的mapping即对应的数组中的下标,当然数组的下表是从0开始的。
数据类型定义好了,就要读取数据:
var myReader = new Ext.data.ArrayReader({
id: 0
}, MyRecord);
注意,这里的id:0说明真实数据第0列是对应id。第一列对应我们定义的类型中的title,以此类推。
JsonReader:
JSON数据:这是后台返回的数据:
{ 'results': 2, 'rows': [
{ id: 1, title: '测试', author: '小王', loginTimes: 3 },
{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}
我们要定义自己的数据类型:
model层:
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},//mapping的作用:用于和返回的json数据对应上,mapping 与 后台 action中的类属性相对应
{name: 'loginTimes', type: 'int'}
]);
Store层写:
1 Ext.define("ExtApp.store.StudentList",{
2 extend:"Ext.data.Store",
3 model:"ExtApp.model.UserinfoM",
4 autoLoad:{start:0,limit:3}, // 分页要用的
5 pageSize:3,
6 proxy:{
7 type:"ajax",
8 url : 'queryStudents.action',
9 reader:{
10 type:"json",
11 root:"rows",
12 totalProperty:"results"
13 }
14 }
15 });
Extjs里面Mapping是什么意思?
这里看出来了吧,name属性对应的是我们自己的数据列的名字,mapping对应的是真实数据的数据列名,如果两者相同,mapping可以省略。
XmlReader
这个和JSON很相似,基本一样
先看下原始数据:
2
1
测试 title >
小王 author >
3 loginTimes >
2
新年好 title >
williamraym author >
13 loginTimes >
我们定义自己的数据类型:
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'}
]);
然后是读取数据:
var myReader = new Ext.data.XmlReader({
totalRecords: "results",
record: "rows",
id: "id"
}, MyRecord);
这里也是一一对应的关系。
以上是自己的一些看法,也从网上摘抄了些,有不对的地方希望大家指出来,一起学习。
3.Extjs中Store中定义的root和totalProperty什么意思?参考:http://blog.csdn.net/21aspnet/article/details/6867458
JsonReader支持分页,与JSON数据对应格式如下:
totalProperty: json数据中,保存总记录数的属性
successProperty: json数据中,保存是否返回成功的属性名
root: json数据中,保存记录集的属性的属性名
id: json数据中,记录中主键所对应的列的属性名
例如:后台返回给前台的JSON数据如下面的代码所示:
//JSON数据
var json = { 'results': 2,
'rows': [{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
]
};
在JsonReader中设置为如下代码:
//JsonReader
var reader = new Ext.data.JsonReader(
{
totalProperty: "results", //totalRecords属性由json.results得到
successProperty: true, //json数据中,保存是否返回成功的属性名
root: "rows", //构造元数据的数组由json.rows得到
id: "id" //id由json.id得到
}, [
{ name: 'name', mapping: 'name' },
{ name: 'occupation'} //如果name与mapping同名,可以省略mapping
]
);
jsonreader从proxy中读取的数据需要进行解析,这些数据转换成Record数组后才能提供给Ext.data.Store使用。
在JavaScript中,JSON是一种非常重要的数据格式,key:value的形式比XML那种复杂的标签结构更容易理解,代码量也更小,很多人倾向于使用它作为EXT的数据交换格式。为JsonReader准备的JSON数据如下面的代码所示:
vardata = {
id:0,
totalProperty:2,
successProperty:true,
root:[
{id:'id1',name:'name1',descn:'descn1'},
{id:'id2',name:'name2',descn:'descn2'}
]
};
与数组相比,JSON的最大优点就是支持分页,我们可以使用totalProperty参数表示数据的总量。successProperty参数是可选的,可以用它判断当前请求是否执行成功,进而判断是否进行数据加载。在不希望JsonReader处理响应数据时,可以把successProperty设置成false。
现在来讨论一下JsonReader,看看它是如何与上面的JSON数据对应的,如下面的代码所示。
varreader = newExt.data.JsonReader({
successProperty: "successproperty",
totalProperty: "totalProperty",
root: "root",
id: "id"
}, [
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'descn',mapping:'descn'}
]);
因为name和mapping部分的内容是相同的,其实这里的mapping可以省略,默认会用name参数从JSON中获得对应的数据。如果不想与JSON里的名字一样,也可以使用mapping修改。
extjs中元数据_Extjs中Store小总结相关推荐
- Extjs如何调取combobox中的listeners里面的方法
Extjs如何调取combobox中的listeners里面的方法 在使用Ext.js 中遇到的问题 背景 Ext.js 版本是4.2 代码 {xtype: 'button',margin: '-5 ...
- 如何用C语言改变宏定义的大小,C语言中宏定义使用的小细节
C语言中宏定义使用的小细节 #pragma#pragma 预处理指令详解 在所有的预处理指令中,#Pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#p ...
- SQL Server 中关于 @@error 的一个小误区
原文:SQL Server 中关于 @@error 的一个小误区 在SQL Server中,我常常会看到有些前辈这样写: if(@@error<>0)ROLLBACK TRANSACTIO ...
- html5数组查找第二大数,2021-06-29:在两个都有序的数组中找整体第K小的数。
2021-06-29:在两个都有序的数组中找整体第K小的数. 福大大 答案2021-06-29: 1.A和B长度不等的时候,需要把A和B的长度变成相等. A是短数组,B是长数组. 第k小的数,k从1开 ...
- [Redux/Mobx] 在redux中,什么是store?
[Redux/Mobx] 在redux中,什么是store? 单一数据源,整个应用数据保存的地方 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目 ...
- 如何在data visualization 中update svg_如何操作小程序页面中data数据区中的数据
前言 在微信小程序中,每一个页面都有一个独立的js文件,用来实现该页面的业务逻辑.这个js文件通常采用Page()方法来对页面进行注册.其中系统为页面设置了一个名为data的区域,用来存储页面的初始数 ...
- python中template是什么意思啊_Python中Template使用的一个小技巧
Python中Template是string中的一个类,可以将字符串的格式固定下来,重复利用. from string import Template s = Template("there ...
- nutzwk运行后wk-web中生成ehcache.disk.store.dir有什么用,怎么去掉
nutzwk运行后wk-web中生成ehcache.disk.store.dir有什么用,怎么去掉 发布于 29天前 作者 qq_96c46988 64 次浏览 复制 上一个帖子 下一个帖子 ...
- 内存占用小的手机输入法_华为手机输入法中6个超实用的小技巧,你没用过就太可惜了!...
阅读本文前,请您先点击上面蓝色字体"财经史"再点击"关注",这样您就可以免费收到我们的最新内容了,每天都会有更新,完全是免费订阅,请放心关注. 想必大家对华为手 ...
最新文章
- 《Apache Flink官方文档》 Apache Flink介绍
- 用python画关系网络图-使用python画社交网络图实例代码
- 【网络编程】之四、socket网络编程例解
- 20张图表达程序员的心酸
- HibernateTemplate的一些常用方法总结
- php等级证书,php银行开放平台接口1:php 对cer证书处理
- npm卸载全局安装的第三方插件注意事项
- python3爬虫用代理池爬虫搜狗微信文章
- CardView介绍
- Qt 6安装(qt6 测试在win7运行崩溃,不再支持win7)
- 鸿蒙系统手机电脑互传文件,【手机篇】巧借局域网,便捷实现手机电脑间的文件传输...
- 计算机组成原理——存储器系统
- python的运行方式有哪两种 有何区别_python程序的两种运行方式是什么
- 红帽linux编程结束编辑,红帽文件相关操作
- stm32 f1和f4的比较
- 2019年 项目信息
- 全志A83T平台调试MIPI DSI屏幕心得
- 山西省第十届计算机技能大赛,附件2山西省第十届职业院校技能大赛比赛方案.doc...
- 量子退火?这又是啥?居然撑起了第一家量子计算公司
- :“ORA-12514: TNS:listener does not currently know of service requested in connect descriptor”错误