- 浏览: 756061 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
Ripin_Yan:
写的挺透彻
session与cookie的区别? -
1045565111:
谢谢,运行起来了,非常不错~~~
EXTJS动态树的实现 -
hlxhf5000:
找了半天,机会都没有全套的下载
ExtJs视频教程集锦 -
slysuccess:
讲解的非常好!以前还不是太明白,现在终于明白了!谢谢博主
ExtJs中关于grid和store的应用分析(二) -
yixiandave:
怎么看都蛋疼啊。。
js继承的实现
第三部分:解析器与数据的关系
一、XmlReader的构造方法定义如下:
XmlReader( Object meta, Object recordType )
二、JsonReader的构造方法定义如下:
JsonReader( Object meta, Object recordType )
三、ArrayReader的构造方法定义如下:
ArrayReader( Object meta, Object recordType )
都表示实例化这些解析器时,需要传递2个参数,一个是meta,一个是recordType。
但是不同的解析器他们需要的meta的值为不同的。只需看各自的Config Options(即配置选项)。也就是说,meta是由配置选项组成的。而recordType是指通过Recorde.create方法得到的数据结构的定义。一般也可以为var fields = ["id","name","email","sex","age"];这样定义的fields。
一、XmlReader所接受的配置选项有:
id:
其值是作为数据唯一标志的字符串,必须为fields中某列的name值。如:id:"id",也可以是id:"name",但是这个时候,字段name的值要确保是能唯一标志数据的。
record:
其值为可以指定数据的字符串。如:record:"row"
success:
totalRecords:
其值为可以指定数据总数的字符串。如:totalRecords:"total"
二、JsonReader所接受的配置选项有:
id:
同XmlReader
root:
其值为可以指定数据的字符串。如:root:"result"
successProperty:
totalProperty:
其值为可以指定数据总数的字符串。如:totalProperty:"total"
三、ArrayReader所接受的配置选项有:
id:
同XmlReader
现在再来看一下解析器与数据的关系。
数据只要满足了解析器的要求,那么数据就能获取成功。什么叫满足解析器的要求呢?有两种方式均可满足解析器的要求。
第一种:给予的数据不包含metaData
第二种:给予的数据包含了metaData
ArrayReader和XmlReader需要的数据是没有metaData的,此时给予的数据需要包含以下内容:
1、ArrayReader:
比如ArrayReader如下定义:
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.ArrayReader({
id:"id"
},fields);
给予的数据应该如下:
[[ "1","langsin1","langsin@langsin.com","0","20" ],[ "2","langsin2","langsin@langsin.com","1","21" ],[ "3","langsin3","langsin@langsin.com","0","22" ],[ "4","langsin4","langsin@langsin.com","1","23" ],[ "5","langsin5","langsin@langsin.com","0","24" ]]
也就是必须为二维数组。
此时二维数组中的每列的数据顺序与fields中的字段名的定义是从左向右一一匹配,即,这里有5条数据,第一条数据是:
id的值为"1",
name的值为"langsin1",
email的值为"langsin@langsin.com",
sex的值为"0",
age的值为"20"
2、XmlReader
比如XmlReader如下定义:
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.XmlReader({
id:"id",
record:"row",
totalRecords:"results"
},fields);
给予的数据应该如下:
<?xml version="1.0" encoding="utf-8"?> <dataset> <results>2</results> <row> <id>1</id> <name>langsin1</name> <email>langsin@langsin.com</email> <sex>0</sex> <age>20</age> </row> <row> <id>2</id> <name>langsin2</name> <email>langsin@langsin.com</email> <sex>1</sex> <age>21</age> </row> <row> <id>3</id> <name>langsin3</name> <email>langsin@langsin.com</email> <sex>0</sex> <age>22</age> </row> <row> <id>4</id> <name>langsin4</name> <email>langsin@langsin.com</email> <sex>1</sex> <age>23</age> </row> <row> <id>5</id> <name>langsin5</name> <email>langsin@langsin.com</email> <sex>0</sex> <age>24</age> </row> </dataset>
这里dataset标签可以换车其他任何字母组成的标签,如aaa,不会影响最后数据的读取。
但是这个dataset标签对里就必须要有1个或多个的results和row标签对。
现在再来看下JsonReader。
JsonReader可以用第一种也可以用第二种的数据给予方式。
1、给予的数据不包含metaData的情况时:
比如JsonReader如下定义:
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.JsonReader({
id:"id",
root:"result",
totalProperty:"total"
},fields);
给予的数据应该如下:
{ total:5, result:[{ id:"1", name:"langsin1", email:"langsin@langsin.com", sex:"0", age:"20" },{ id:"2", name:"langsin2", email:"langsin@langsin.com", sex:"1", age:"21" },{ id:"3", name:"langsin3", email:"langsin@langsin.com", sex:"0", age:"22" },{ id:"4", name:"langsin4", email:"langsin@langsin.com", sex:"1", age:"23" },{ id:"5", name:"langsin5", email:"langsin@langsin.com", sex:"0", age:"24" }] }
如果定义时不包含root配置选项时,那么给予的数据应该如下:
[{ id:"1", name:"langsin1", email:"langsin@langsin.com", sex:"0", age:"20" },{ id:"2", name:"langsin2", email:"langsin@langsin.com", sex:"1", age:"21" },{ id:"3", name:"langsin3", email:"langsin@langsin.com", sex:"0", age:"22" },{ id:"4", name:"langsin4", email:"langsin@langsin.com", sex:"1", age:"23" },{ id:"5", name:"langsin5", email:"langsin@langsin.com", sex:"0", age:"24" }]
2、给予的数据包含metaData的情况时:
比如JsonReader如下定义:
var reader = new Ext.data.JsonReader({
id:"id",
},fields);
给予的数据应该如下:
{ metaData:{ fields:["id","name","email","sex","age"], root:"result" }, result : [{ id : "1", name : "langsin1", email : "langsin@langsin.com", sex : "0", age : "20" }, { id : "2", name : "langsin2", email : "langsin@langsin.com", sex : "1", age : "21" }, { id : "3", name : "langsin3", email : "langsin@langsin.com", sex : "0", age : "22" }, { id : "4", name : "langsin4", email : "langsin@langsin.com", sex : "1", age : "23" }, { id : "5", name : "langsin5", email : "langsin@langsin.com", sex : "0", age : "24" }] }
这里将root和fields等都转移到了给予的数据的metaData中。
评论
3 楼
hvang1988
2009-07-16
需要资料可以在google中搜索啊
2 楼
kejiangwei
2009-01-06
刚学Ext,拜读之后,受益匪浅,谢谢!
1 楼
yiminghe
2008-09-24
能分析一下
loadMask 与 gridpanel 源码实现么
loadMask 与 gridpanel 源码实现么
发表评论
-
关于Ext2.2中调用iframe,无法打开 Internet 站点
2009-02-26 13:40 2923在 EXT2.0运行正常的程序,调换 EXT2.2 的脚本之 ... -
对applyTo和renderTo的理解和思考
2008-10-06 15:54 17986extjs中经常会用到renderTo ... -
ExtJs视频教程集锦
2008-09-03 12:55 25848《ExtJs视频教程》全套已全面出炉,欢迎大家关注!目录如下: ... -
ExtJs中关于grid和store的应用分析(二)
2008-08-29 13:45 9575第二部分:Store的核心阐释 Store即数据存储器,主 ... -
ExtJs中关于grid和store的应用分析(一)
2008-08-29 12:35 11027第一部分:阐述grid与st ... -
应用ExtJs时解决乱码的方法
2008-08-22 17:54 9951一般情况下,项目采用了UTF-8的字符集格式,那么所有的js文 ... -
序号结合分页功能的实现
2008-08-15 11:18 3738序号结合分页显示:一 ... -
ExtJs想入门的请进-解读API
2008-07-22 10:49 9131如果你对EXT有兴趣但不知道如何下手,如果你有了API但不知道 ... -
关于动态树的完整示例代码下载
2008-07-14 15:57 7585应网友反馈,现提供动态树的完整示例代码工程,以方便大家学习和交 ... -
ExtJs中关于mask()的应用说明
2008-06-30 10:25 12181Ext.Msg.alert( String title, St ... -
EXTJS动态树的实现
2008-06-25 00:27 28724EXTJS动态树的实现举例 一、描述:通过dwr实现JS与后台 ... -
透析Extjs源码之结合API写事件响应函数
2008-05-16 14:34 3902我在一个论坛看到EXT传递参数的问题,觉得很多学EXT的人都 ... -
透析Extjs源码之layout(二)FormPanel与FormLayout的关系
2008-05-16 10:38 6149理解了layout之后,再看看FormPanel源码,发现它指 ... -
透析Extjs源码之layout(一)layout的实现
2008-05-16 09:48 58901、配置选项layout什么时候可用? 只有Ext.Conta ... -
透析Extjs的Ext.js源码(五)分析继承的实现
2008-05-15 14:33 10095ext中有关继承的实现的关键代码如下:(Ext.js中) e ... -
透析Extjs的Ext.js源码(四)去理解Ext.js
2008-05-14 18:00 2533//先定义匿名方法,第一个括号对里的,必须要有这个括号对, ... -
透析Extjs的Ext.js源码(三)扩展
2008-05-14 18:00 2403if(!Person.extend){//若extend属 ... -
透析Extjs的Ext.js源码(二)能在定义时就能执行的方法的写法 function(){...}
2008-05-14 17:59 3985/** * 第二部分:能在 ... -
透析Extjs的Ext.js源码(一)对象属性的添加和设置
2008-05-14 17:57 5710/** * 分析Ext.js */ /** ... -
extjs视频教程系列之-第一讲:ExtJS介绍及应用举例
2008-05-06 15:13 8138地址: http://bbs.langsin.com/view ...
相关推荐
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs4 对多种store数据 ,以多种方式绑定到界面上,以一例子以说明编写
EXTJS中grid控件数据导出excel示例。很好理解。
Extjs 4.2 --store grid form mvc模式等一些demo
第十二讲:extjs4.0的MVC重构十一讲中的grid(中) 第十三讲:extjs4.0的高级组建grid(下)列模式 第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid...
第十二讲:extjs4.0的MVC重构十一讲中的grid(中) 第十三讲:extjs4.0的高级组建grid(下)列模式 第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02...
第十二讲:extjs4.0的MVC重构十一讲中的grid(中) 第十三讲:extjs4.0的高级组建grid(下)列模式 第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02...
第十二讲: EXTJS4.0的MVC重构十一讲中的Grid(中) 第十三讲: EXTJS4.0的高级组建Grid(下)列模式 第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02...
1、关于加载和回调的问题 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据;因此,我们需要给它添加一个提示信息! 但是Store却没有waitMsg属性。 解决方案: 1.给...
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
于是我狂找我的代码问题,无意中关掉FF的firbug插件界面,grid就现实出来了。。。原来只要我的窗口发生任何变化Grid才会显示出来。 请问这是我代码问题还是bug?如何解决? 补充一下,我直接在TabPanel里面用items...
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页,数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全,加载即可运行 5.VX:humingxing可随时交流
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext ...
导出Extjs中的store的数据为excel,前段js导出。 Export store to Excel Well, here's an exporter that can export a grid, tree or simply a store to excel. It's a fork from another project, I adapted it ...
这个应用程序由以下文件和目录组成: index.html - 用于显示应用程序的主要 html 文件 app.js - 主要的 ExtJS 应用程序文件 app 文件夹,其中包含应用程序所需的所有文件 控制器 - 包含应用程序的控制器 模型 - ...
最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...
Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单(及其验证方法),数据组件: store,model等,讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。
EXT-JS Grid 用法 用EXT Designer 工具设计,步骤清晰详尽。
在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查找: 两点需要注意的地方: 1、在创建store时,需要设置groupField属性的值,即为需要分组的值 ...
实现treegrid组件的(CRUD)读取、新增、修改、删除 ...store.load({node:node}); //异步Ajax提交新增数据 insertdb:function(newrecords) //异步Ajax提交修改数据 updatedb:function(updaterecords)