数据篇ExtJs中的Record、Reader详解ppt课件.ppt

北风网项目培训 数据篇 1 ExtJs中的Record Reader详解 1 ExtJs版国讯教育通用智能OA办公平台 1 目录 Ext data简介了解RecordDataReader详解JsonReader ArrayReader XmlReader 2 Ext data简介Ext data在命名空间中定义了一系列store reader和proxy Grid和ComboxBox都是以Ext data为媒介获取数据的 它包含异步加载 类型转换 分页等功能 Ext data默认支持Array JSON XML等数据格式 可以通过Memory HTTP ScriptTag等方式获得这些格式的数据 如果要实现新的协议和新的数据结构 只需要扩展reader和proxy即可 3 数据处理数据处理是客户端的数据统一操作的接口 不管是从服务器返回的数据还是客户端自行生成的数据 都可以通过该接口来统一操作 这样就为组件的数据操作提供了极大的方便 Ext的data处理分成三部分 store是统一对组件或开发的接口 它的数据是通过proxy从服务器端 包含跨域 或本地的客户浏览器中获取原始数据 从原始数据到store的统一格式的中间还有一步 那就是对于不同的形式的原始数据 xml json等 进行去解析 Reader就是完成解析功能 通过代理 分析 储存三步 呈现给开发者的数据就如数据库储存的二维表的结构数据一样 有着排序 统计 查询 更新的功能 完全可以把store看成一个客户端的临时数据库 这就是组件对数据的操作提供巨大的方便 4 类Ext data Record包 Ext data定义的文件 Record js类全称 Ext data Record继承自于 ObjectRecord类不但封装了Record的相关定义信息 还封装了Ext data Store里面所使用的Recrod对象的值信息 并且方便任何透过Ext data Store来访问Records缓存之信息的代码 5 类Ext data DataReader包 Ext data定义的文件 DataReader js类全称 Ext data DataReader继承自于 Object用于读取结构化数据 来自数据源 然后转换为Ext data Record对象集合和元数据Ext data Store这二者合成的对象 这个类应用于被扩展而最好不要直接使用 从DataReader派生下来的有 ArrayReader JsonReader XmlReader 6 类Ext data Store包 Ext data定义的文件 Store js类全称 Ext data Store继承自于 Ext util ObservableStore类封装了一个客户端的Record对象的缓存 为诸如GridPanel ComboBox和DataView等的小部件提供了数据的入口 Store对象使用一个DataProxy的实现来访问数据对象 该Proxy对象在configured定义 不过你可以调用loadData直接地把数据对象传入你的数据 在DataReader实现的帮助下 从该类提供的数据对象来创建Record实例 你可在configured指定这个DataReader对象 这些records都被缓存的并且通过访问器函数可利用到 Store下的子类有 JsonStore ArrayStore XmlStore 7 了解Record首先需要明确是 ExtJS中有一个名为Record的类 表格等控件中使用的数据是存放在Record对象中 一个Record可以理解为关系数据表中的一行 也可以称为记录 Record对象中即包含了记录 行中各列 的定义信息 也就是该记录包含哪些字段 每一个字段的数据类型等 同时又包含了记录具体的数据信息 也就是各个字段的值 8 我们来看直接使用Record的代码 9 DataReader详解DataReader表示数据读取器 也就是数据解析器 其负责把从服务器或者内存数组 xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象 并存储到Store里面的记录集数组中 数据解析器的基类由Ext data DataReader定义 其它具体的数据解析器都是该类的子类 ExtJS中提供了读取二维数组 JSon数据及Xml文档的三种数据解析器 分别用于把内存中的二级数组 JSON格式的数据及XML文档信息解析成记录集 10 1 ArrayReaderExt data ArrayReader 数组解析器 用于读取二维数组中的信息 并转换成记录集Record对象 首先看下面的代码 varMyRecord Ext data Record create name title mapping 1 name username mapping 2 name loginTimes mapping 3 type int varmyReader newExt data ArrayReader id 0 MyRecord 11 这里定义的myReader可以读取下面的二维数组 1 测试 小王 3 2 新年好 williamraym 13 2 JsonReaderExt data JsonReader Json数据解析器 用于读取JSON格式的数据信息 并转换成记录集Record对象 看下面使用JsonReader的代码varMyRecord Ext data Record create name title name username mapping author name loginTimes type int varmyReader newExt data JsonReader totalProperty results root rows id id MyRecord 12 这里的JsonReader可以解析下面的JSON数据 results 2 rows id 1 title 测试 author 小王 loginTimes 3 id 2 title Ben author williamraym loginTimes 13 JSonReader还有比较特殊的用法 就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中 比如下面的例子 varmyReader newExt data JsonReader 13 这一个不带任何参数的myReader 可以处理从服务器端返回的下面JSON数据 metaData totalProperty results root rows id id fields name title name username mapping author name loginTimes type int results 2 rows id 1 title 测试 author 小王 loginTimes 3 id 2 title 新年好 author williamraym loginTimes 13 14 3 XmlReaderExt data XmlReader XML文档数据解析器 用于把XML文档数据转换成记录集Record对象 看下面的代码 varMyRecord Ext data Record create name title name username mapping author name loginTimes type int varmyReader newExt data XmlReader totalRecords results record rows id id MyRecord 15 上面的myReader能够解析下面的xml文档信息 21测试小王32新年好williamraym13 16 再如如下xml 001001001合肥巢湖芜湖 17 002002001aaabbbccc 18 例如 varstore1 newExt data Store url city xml reader newExt data XmlReader record country name country mapping cid store1 on load function store alert store getCount alert store getAt 1 get country alert Ext util JSON encode store getAt 1 data vardata store each function item data push Ext util JSON encode item data alert data store1 load 加载所有国家 19 varstore2 newExt data Store url city xml reader newExt data XmlReader record country name China province name p mapping pid store2 on load function store alert store getCount alert store getAt 1 get country store each function item alert Ext util JSON encode item data store2 load 加载省份 20 varstore3 newExt data Store url city xml reader newExt data XmlReader record country name China province name 安徽 city name cityname store3 on load function store alert store getCount alert store ge