ExtJs的Reader

ExtJs的Reader

Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Modle中

结构图

    Ext.data.reader.Reader 读取器的根类

       Ext.data.reader.Json JSON格式的读取器

           Ext.data.reader.Array 扩展JSON的Array读取器

       Ext.data.reader.Xml XML格式的读取器

Writer

结构图

    Ext.data.writer.Writer

       Ext.data.writer.Json 对象被解释成JSON的形式传到后台

       Ext.data.writer.Xml  对象被解释成XML的形式传到后台

1.     Json的读取器

 

[javascript] view plain copy
  1. (function(){  
  2.     Ext.onReady(function(){  
  3.         var userData = {  
  4.             //total : 200,  
  5.             count:250,  
  6.             user:{  
  7.                 userID:'1',  
  8.                 name:'uspcat.com',  
  9.                 orders:[  
  10.                     {id:'001',name:'pen'},  
  11.                     {id:'002',name:'book'}  
  12.                 ]  
  13.             }  
  14.         };  
  15.         //定义model  
  16.         Ext.regModel("user",{  
  17.             fields:[  
  18.                 {name:'userID',type:'string'},  
  19.                 {name:'name',type:'string'}  
  20.             ],  
  21.             hasMany: {model: 'order'}    //定义有多个order的属性  
  22.         });  
  23.         Ext.regModel("order",{  
  24.             fields:[  
  25.                 {name:'id',type:'string'},  
  26.                 {name:'name',type:'string'}  
  27.             ],  
  28.             belongsTo: {type: 'belongsTo', model: 'user'}  //定义属于  
  29.         });  
  30.         var mproxy = Ext.create("Ext.data.proxy.Memory",{  
  31.             model:'user',  
  32.             data:userData,  
  33.             reader:{  
  34.                 type:'json',  
  35.                 root:'user',  
  36.                 implicitIncludes:true,    //级联读取  
  37.                 totalProperty:'count'       
  38.                 //record :'info'//服务器返回的数据可能很复杂,用record可以删选出有用的数据信息,装在带Model中  
  39.             }  
  40.         });  
  41.         mproxy.read(new Ext.data.Operation(),function(result){  
  42.             var datas = result.resultSet.records;  
  43.             alert(result.resultSet.total);    //打印count  
  44.             Ext.Array.each(datas,function(model){  
  45.                 alert(model.get('name'));  
  46.             });  
  47.             var user = result.resultSet.records[0];   //获取第一个用用数据  
  48.             var orders = user.orders();    //获取到用户中的orders集合  
  49.             orders.each(function(order){   //遍历orders集合  
  50.                 alert(order.get('name'));  
  51.             });  
  52.              
  53.         });  
  54.     });  
  55. })();  

2.     Array读取器

 

[javascript] view plain copy
  1.  Ext.onReady(function(){  
  2.     Ext.regModel("person",{  
  3.        fields:[  
  4.            'name','age'  
  5. //         {name:'name'},  
  6. //         {name:'age'}  
  7.        ],  
  8.        proxy :{  
  9.            type:'ajax',  
  10.            url:'person.jsp',  
  11.            reader:{  
  12.               type:'array'  
  13.            }  
  14.        }  
  15.     });  
  16.        var person =Ext.ModelManager.getModel('person');  
  17.        person.load(1,{  
  18.            success:function(model){  
  19.               alert(model.get('name'));  
  20.            }  
  21.        });  
  22. });  

Person.jsp文件:

 <%

    response.getWriter().write("[['yunfengcheng',26]]");

%>

3. XML格式的读取器

 

[javascript] view plain copy
  1. (function(){  
  2.     Ext.onReady(function(){  
  3.        Ext.regModel("user",{  
  4.            fields:[  
  5.               {name:'name'},  
  6.               {name:'id'}  
  7.            ],  
  8.            proxy:{  
  9.               type:'ajax',  
  10.               url:'users.xml',  
  11.               reader:{  
  12.                   type:'xml',  
  13.                   record:'user'  
  14.               }  
  15.            }  
  16.        });  
  17.        var user = Ext.ModelManager.getModel('user');  
  18.        user.load(1,{  
  19.            success:function(model){  
  20.               alert(model);  
  21.               alert(model.get('id'));  
  22.            }  
  23.        });  
  24.     });  
  25. })();  

Users.xml文件:

 

[html] view plain copy
  1. <users>  
  2.     <user>  
  3.        <name>uspcat.com</name>  
  4.        <id>00101</id>  
  5.     </user>  
  6. </users>  

4.     writer的Json和xml

 

[javascript] view plain copy
  1. Ext.onReady(function(){  
  2.     Ext.regModel("person",{  
  3.        fields:[  
  4.            'name','age'  
  5.        ],  
  6.        proxy :{  
  7.            type:'ajax',  
  8.            url:'person.jsp',  
  9.            writer:{  
  10.               type:'json'  //使用Json提交数据  
  11.               //type:'xml' //使用xml提交数据  
  12.            }  
  13.        }  
  14.     });  
  15.     Ext.ModelMgr.create({  
  16.        name:'uspcat.con',  
  17.        age:1  
  18.     },'person').save();   
  19. });  

使用Json写入的时候，浏览器查看提交信息是如下图，是以json提交的:

使用xml写入的时候，浏览器查看提交信息是如下图，是以xml提交的:

 

原文链接：https://blog.csdn.net/hanhan313/article/details/8159774


更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361197.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java Lambdas和低延迟

Java Lambdas和低延迟

总览 有关在Java和低延迟中使用Lambda的主要问题是&#xff1a; 它们会产生垃圾吗&#xff0c;您能做些什么吗&#xff1f; 背景 我正在开发一个支持不同有线协议的库。 这样的想法是&#xff0c;您可以描述要写入/读取的数据&#xff0c;并且有线协议确定它是否使用带有JSon或…
阅读更多...
Java中的线程本地存储

Java中的线程本地存储

开发人员中鲜为人知的功能之一是线程本地存储。 这个想法很简单&#xff0c;并且在需要数据的情况下很有用。 如果我们有两个线程&#xff0c;则它们引用相同的全局变量&#xff0c;但我们希望它们具有彼此独立初始化的单独值。 大多数主要的编程语言都有该概念的实现。 例如&…
阅读更多...
多个退货单

多个退货单

我曾经听说过&#xff0c;过去人们为使方法具有单个出口点而奋斗。 我知道这是一种过时的方法&#xff0c;从未认为它特别值得注意。 但是最近&#xff0c;我与一些仍坚持该想法的开发人员进行了联系&#xff08;最后一次是在这里 &#xff09;&#xff0c;这让我开始思考。 因…
阅读更多...
GO 语言编程 windows 环境搭建

GO 语言编程 windows 环境搭建

参考 : http://blog.csdn.net/love_se/article/details/7754274 首先是安装Go&#xff0c;这里有很详细的安装说明&#xff0c;http://code.google.com/p/golang-china/wiki/Install 或者http://golang.org/doc/install 下面我们在window下面安装&#xff0c;google有提供win安…
阅读更多...
机打发票打印管理

机打发票打印管理

最近公司也从手写发票换成了机打发票&#xff0c;便应财务的要求做了这么一个简单的发票管理及打印系统&#xff0c;程序并不复杂。 使用C#&#xff08;2.0&#xff09; Access&#xff08;97-2003版&#xff09;/WinForm形式 系统菜单中有企业基本信息设置&#xff0c;见图4…
阅读更多...
序列化的概念

序列化的概念

讨论了为什么Optional不可序列化以及如何处理&#xff08;即将推出&#xff09;之后&#xff0c;让我们仔细看看序列化。 总览 这篇文章介绍了序列化的一些关键概念。 它尝试精简地执行此操作&#xff0c;而不会涉及太多细节&#xff0c;包括将建议降至最低。 它没有叙述&…
阅读更多...
Java飞行记录器（JFR）

Java飞行记录器（JFR）

JFR是Java分析器&#xff0c;它使您可以研究代码的运行时特征。 通常&#xff0c;您将使用探查器来确定代码的哪些部分导致大量内存分配或导致消耗过多的CPU。 有很多产品在那里。 过去&#xff0c;我使用过YourKit&#xff0c;OptimizeIt&#xff0c;JProfiler&#xff0c;Ne…
阅读更多...
图像识别SLIC、Haralick texture features（自备）

图像识别SLIC、Haralick texture features（自备）

SLIC 简单线性迭代聚类(SLIC ),它采用k-means聚类方法来有效地生成超像素。 SLIC超像素分割详解&#xff08;一&#xff09;&#xff08;二&#xff09;&#xff08;三&#xff09;_超像素分割 样本-CSDN博客 超像素分割 & SLIC算法 & 使用示例_slic分割算法matlab-C…
阅读更多...
浏览器中的JavaFX

浏览器中的JavaFX

浏览器中的JavaFX屏幕截图 最近&#xff0c;Carl Dea和我启动了一个新项目&#xff0c;将JavaFX 8引入浏览器。 今天&#xff0c;我想介绍我们创建的前两个概念验证&#xff0c;以查看该想法是否完全可行。 对于不耐烦的人&#xff0c;这里是到PoC的链接。 但请注意&#xff0…
阅读更多...
MDB！= JMS，反之亦然

MDB！= JMS，反之亦然

基本 消息驱动Bean&#xff08;又称为MDB&#xff09;只是另一个EJB&#xff0c;如无状态&#xff0c;有状态或单例。 使用MessageDriven批注指定。 MDB用于异步消息处理 它们与无状态EJB 相似 &#xff0c;因为它们都是由EJB容器池化的 但是&#xff0c;它们与无状态EJB不同…
阅读更多...
周三的工作 张孝祖

周三的工作 张孝祖

今天的任务是主面板master嘿嘿 上头有几个按钮&#xff0c;登录登出&#xff0c;个人信息&#xff0c;注册注销等&#xff0c;他们是根据用户是否等率决定的 具体代码如下 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System…
阅读更多...
CSS 垂直居中

CSS 垂直居中

1、使用绝对定位垂直居中 绝对对位原理&#xff1a;元素在过度受限情况下&#xff0c;将margin设置为auto&#xff0c;浏览器会重算margin的值&#xff0c;过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{/*display:none;*/position:absol…
阅读更多...
[ExtJs6] 环境搭建及创建项目

[ExtJs6] 环境搭建及创建项目

1. 环境搭建 sencha cmd 和 extjs6 sdk.sencha cmd: https://www.sencha.com/products/extjs/cmd-download/extjs6: https://www.sencha.com/sencha cmd 安装过程将其加入系统的环境变量path中。export PATH${PATH}:/Users/shuanggai/bin/Sencha/Cmd/6.2.2.36把改语句添加到 ~/…
阅读更多...
通过Spring Integration和RabbitMQ获得高可用性的AMQP支持的消息通道

通过Spring Integration和RabbitMQ获得高可用性的AMQP支持的消息通道

Spring Integration消息通道默认情况下将消息存储在内存中。 这是因为内存速度快&#xff0c;易于实现&#xff0c;并且不会增加网络成本。 但是&#xff0c;在某些情况下&#xff0c;这可能会引起问题&#xff0c;因为如果应用程序崩溃或服务器意外关闭&#xff0c;所有消息都…
阅读更多...
vue之node.js的简单介绍

vue之node.js的简单介绍

一、什么是node.js&#xff1f; 它是可以运行JavaScript的服务平台&#xff0c;可以吧它当做一门后端程序&#xff0c;只是它的开发语言是JavaScript 二、安装 1、node.js的特性&#xff1a; - 非阻塞IO模型- 时间驱动 2、运用的场景&#xff1a; - 高并发低业务- 实时场景- 聊…
阅读更多...
jQuery之jQuery扩展和事件

jQuery之jQuery扩展和事件

一、jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点&#xff08; 搜索框例子&#xff09; change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn])…
阅读更多...
JavaFX列表示例

JavaFX列表示例

这是使用JavaFX构建的示例列表应用程序。 该应用程序是待办事项列表。 此应用程序具有添加&#xff0c;更新和删除列表中项目的功能。 列表数据存储在HSQLDB关系数据库中。 该应用程序使用JDBC&#xff08;Java数据库连接&#xff09;API访问数据库。 该应用程序打包为可执行JA…
阅读更多...
flex弹性布局操练2

flex弹性布局操练2

上一个是练习的1个内元素的&#xff0c;这次练习两个元素的。 ul.box1 {list-style:none;background-color:black;display:flex;justify-content:space-between;/*水平轴的位置,默认是flex-start就是第一种情况*/align-items:center;/*垂直轴的位置*/width:100px;height:100px;…
阅读更多...
Selenium1 Selenium2 WebDriver

Selenium1 Selenium2 WebDriver

内容摘要&#xff1a; Selenium 1 原理WebDriver WebDriver 组件WebDriver 协议 Remote End 处理流程Commands & Endpoints & 请求路由错误消息 WebDriver 配置 Selenium 2 1、Selenium 1 原理 (1).测试用例&#xff08;Testcase&#xff09;通过Client Lib的接口向Se…
阅读更多...
Fork / Join框架vs并行流vs.ExecutorService：最终的Fork / Join基准

Fork / Join框架vs并行流vs.ExecutorService：最终的Fork / Join基准

Fork / Join框架在不同配置下如何工作&#xff1f; 就像即将上映的《星球大战》一样&#xff0c;围绕Java 8并行性的批评也充满了兴奋。 并行流的语法糖带来了一些炒作&#xff0c;就像我们在预告片中看到的新型光剑一样。 现在&#xff0c;有了许多使用Java进行并行处理的方法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023