- 浏览: 639611 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
nehaoww:
754588141@qq.com,源码可以给一份吗
Struts/JSP可上传、预览服务器端文件(图片、文件、Flash、多媒体)文件组件 -
zzd_md:
把XmlTreeLoader.js 这个文件的路径改一下就好了 ...
ExtJs 实现的后台管理框架 -
llixinrui_strive:
EXT之form.load(转) -
liangzhang0929:
部门管理和用户管理的url怎么显示#,没法打开dept_lis ...
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05 -
datouren:
您好想问你一下 为什么只显示根节点 其它节点不显示 目前是在一 ...
ExtJs加载本地txt格式的数据
Ext.data
Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。Ext.data默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。DWRProxy就实现了自身的proxy和reader,让EXT可以直接从DWR获得数据。
Ext.data最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是Ext.data成了数据的来源,而控件负责显示数据;;;
以下为Ext.data命名空间中的在个常用类:
1、DataProxy
2、DataReader
3、Store
关于数据的显示,一般要经历三个流程:DataProxy-->DataReader-->Store
一、Ext.data.Connection
Ext.data.Connection是对Ext.lib.Ajax的封装,它提供了配置使用Ajax的通用方式,它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层的Ext.lib.Ajax相比,Ext.data. Connection提供了更简洁的配置方式,使用起来更方便。
Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.data.Connection的使用方式如代码清单10-1所示。
代码清单10-1 使用Ext.data.Connection
var conn = new Ext.data.Connection({
autoAbort: false,
defaultHeaders: {
referer: 'http://localhost:8080/'
},
disableCaching : false,
extraParams : {
name: 'name'
},
method : 'GET',
timeout : 300,
url : '01-01.txt'
});
在使用Ext.data.Connection之前,都要像上面这样创建一个新的Ext.Connection实例。我们可以在构造方法里配置对应的参数,比如autoAbort表示链接是否会自动断开、default- Headers参数表示请求的默认首部信息、disableCaching参数表示请求是否会禁用缓存、extraParams参数代表请求的额外参数、method参数表示请求方法、timeout参数表示连接的超时时间、url参数表示请求访问的网址等。
在创建了conn之后,可以调用request()函数发送请求,处理返回的结果,如下面的代码所示。
conn.request({
success: function(response) {
Ext.Msg.alert('info', response.responseText);
},
failure: function() {
Ext.Msg.alert('warn', 'failure');
}
});
Request()函数中可以设置success和failure两个回调函数,分别在请求成功和请求失败时调用。请求成功时,success函数的参数就是后台返回的信息。
我们再来看一下request函数中的其他参数。
q url:String:请求url。
q params:Object/String/Function:请求传递的参数。
q method:String:请求方法,通常为GET或POST。
q callback:Function:请求完成后的回调函数,无论是成功还是失败,都会执行。
q success:Function:请求成功时的回调函数。
q failure:Function:请求失败时的回调函数
q scope:Object:回调函数的作用域。
q form:Object/String:绑定的form表单。
q isUpload:Boolean:是否执行文件上传。
q headers:Object:请求首部信息。
q xmlData:Object:XML文档对象,可以通过URL附加参数的方式发起请求。
q disableCaching:Boolean:是否禁用缓存,默认为禁用。
Ext.data.Connection还提供了abort([Number transactionId])函数,当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求。如果不指定事务id,就会放弃最后一个请求。isLoading([Number transactionId])函数的用法与abort()类似,可以根据事务id判断对应的请求是否完成。如果未指定事务id,就判断最后一个请求是否完成。
二、Ext.data.Record
Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。如果把Ext.data.Store看作是一张二维表,那么它的每一行就对应一个Ext.data. Record实例。
Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。
我们使用Ext.data.Record时通常都是由create()函数开始,首先用create()函数创建一个自定义的Record类型,如下面的代码所示。
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'}
]);
PersonRecord就是我们定义的新类型,包含字符串类型的name和整数类型的sex两个属性,然后我们使用new关键字创建PersonRecord的实例,如下面的代码所示。
var boy = new PersonRecord({
name: 'boy',
sex: 0
});
创建对象时,可以直接通过构造方法为对象赋予初始值,将'boy'赋值给name,0赋值给sex。
现在,我们得到了PersonRecord的实例boy,如何才能得到它的属性呢?以下三种方式都可以获得boy中name属性的数据,如下面的代码所示。
alert(boy.data.name);
alert(boy.data['name']);
alert(boy.get('name'));
这里涉及Ext.data.Record的data属性,这是定义在Ext.data.Record中的一个公共属性,用于保存当前record对象的所有数据。它是一个JSON对象,可以直接从它里面获得需要的数据。可以通过Ext.data.Record的get()函数方便地从data属性中获得指定的属性值。
如果我们需要修改boy中的数据,请不要使用以下方式直接操作data,如下面的代码所示。
boy.data.name = 'boy name';
boy.data['name'] = 'boy name';
而应该使用set()函数,如下面的代码所示。
boy.set('name', 'body name');
set()函数会判断属性值是否发生了改变,如果改变了,就要将当前对象的dirty属性设置为true,并将修改之前的原始值放入modified对象中,供其他函数使用。如果直接操作data中的值,record就无法记录属性数据的修改情况。
Record的属性数据被修改后,我们可以执行如下几种操作。
q commit()(提交):这个函数的效果是设置dirty为false,并删除modified中保存的原始数据。
q reject()(撤销):这个函数的效果是将data中已经修改了的属性值都恢复成modified中保存的原始数据,然后设置dirty为false,并删除保存原始数据的modified对象。
q getChanges()获得修改的部分:这个函数会把data中经过修改的属性和数据放在一个JSON对象里并返回。例如上例中,getChanges()返回的结果是{name:’body name’}。
q 我们还可以调用isModified()判断当前record中的数据是否被修改。
Ext.data.Record还提供了用于复制record实例的函数copy()。
var copyBoy = boy.copy();
这样我们就得到了boy的一个副本,它里面包含了boy的data数据,但copy()函数不会复制dirty和modified等额外的属性值。
三、DataProxy
获取想要的数据,通过他能得到来自不同地方的数据,如数组、远程服务器等,并组织成不同的格式。
Ext.data.DataProxy是获取数据的代码,数据可能来于内存,可能来自于同一域的远程服务器数据,更有可能来自于不同域的远程服务器数据。
DataProxy的代码就是一空架子。且看:
Ext.data.DataProxy = function(){
this.addEvents(
'beforeload',
'load'
);
Ext.data.DataProxy.superclass.constructor.call(this);
};
Ext.extend(Ext.data.DataProxy, Ext.util.Observable);
就是加两事件,从Observable继承了
但在实际应用中,不会直接使用Ext.data.DataProxy类,而是使用他的子类:
1、MemoryProxy:获取来自内存的数据,可以是数组、json或者xml
2、HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据的代理,需要指定url
3、ScriptTagProxy:功能和HttpProxy一样,但支持跨域获取数据。
(一)、MemoryProxy
MemoryProxy只能从JavaScript对象获得数据,可以直接把数组,或JSON和XML格式的数据交给它处理,如下面的代码所示。
var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);
例如:定义一个用来保存城市名称的二维数组:
Var cities = [
[1,"长沙市"],
[2,"株洲市"],
[3,"湘潭市"],
[4,"邵阳市"]
];
在二维数组中,每一个城市保存了两个值:值一表示城市编号,作为实际值,值二表示城市名称,作为显示值,然后将其构建出一个MemoryProxy对象:
var proxy = new Ext.data.MemoryProxy(cities);
(二)、HttpProxy
HttpProxy使用HTTP协议,通过Ajax去后台取数据,构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址,这样HttpProxy才知道去哪里获取数据,如下面的代码所示。
var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
HttpProxy用于远程代理,而且服务端返回信息时必须指定Content-Type属性为"text/xml"或"application/x-json"
后台需要返回EXT所需要的JSON格式的数据,下面的内容就是后台使用JSP的一个范例,如下面的代码所示。
HttpProxy( Object conn ) 构造一个HttpProxy对象,参数可以是一个类似于{url: 'foo.php'}这样的json对象,也可以是一个Ext.data.Connection对象,如果参数没有指定,将使用Ext.Ajax对象将被用于发起请求
getConnection() : Connection 得到当前连接对象
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
从配置的connection对象得到record数据块,并激发callback
params: 发起http请求时所要传递到服务端的参数
DataReader: 见DataReader
callback: 回叫方法,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志
scope: 范围
arg: 这儿的参数将会传递给回叫函数callback
使用示例:
var proxy=new Ext.data.HttpProxy({url:'datasource.xml'});
//关于reader将会在Ext.data.DataReader中讲解
var reader = new Ext.data.XmlReader({
totalRecords: "results",
record: "row",
id: "id"
}, [
{name: 'name', mapping: 'name'},
{name: 'occupation'}
]);
//定义回叫方法
var metadata;
function callback(data,arg,success){
if(success){
metadata=data;
}
}
//从connection配置的url中利用reader将返回的xml文件转为元数据,并传递给callback
proxy.load( null,reader,callback,this);
response.setContentType("application/x-json");
Writer out = response.getWriter();
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
(三)、ScriptTagProxy
ScriptTagProxy的用法几乎和HttpProxy一样,如下面的代码所示。
var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
从这里也看不出来它是如何支持跨域的,我们还需要在后台进行相应的处理,如下面的代码所示
String cb = request.getParameter("callback");
response.setContentType("text/javascript");
Writer out = response.getWriter();
out.write(cb + "(");
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
out.write(");");
其中的关键就在于从请求中获得的callback参数,这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML页面里添加一个<script type="text/javascript"src="/xxx.jsp"> </script>标签,然后把后台返回的内容添加到这个标签中,这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的标签中运行,EXT会生成一个名为callback的回调函数,并把回调函数的名称传递给后台,由后台生成callback(data)形式的响应内容,然后返回给前台自动运行。
虽然上述处理过程比较难理解,但是我们只需要了解ScriptTagProxy的用法就足够了。如果还想进一步了解ScriptTagProxy的运行过程,可以使用Firebug查看动态生成的HTML以及响应的JSON内容。
最后我们来分析一下EXT的API文档中提供的示例,这段后台代码会自动判断请求的类型,返回支持ScriptTagProxy或HttpProxy的数据,如代码清单10-2所示。
代码清单 在后台同时支持HttpProxy和ScriptTagProxy
boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
发表评论
-
Ext Form全攻略1
2010-10-24 10:51 21931 Form概述Formpanel是一个重要的页面组件,在具体 ... -
form.load()加载后,怎么得到服务端返回的JSON数据?-转至 一起Ext
2010-10-23 10:36 5281Ext.Ajax.request({ ur ... -
EXT之form.load(转)
2010-10-23 10:32 4591大家看下面的简单例子,如果我们要实现一个从后台读取对应数据 ... -
Ext 3.0 - 中文API文档 (完整的chm版本) 2009年5月由JS堂翻译小组完成
2009-12-14 16:37 5122大家可以下载了,我也是在网上下载的,出来和大家分享 此贴中 ... -
ExtJs 实现的后台管理框架
2009-12-14 16:21 12343由ExtJs实现的后台管理框架, 你只要添加你左边的树型数据 ... -
ExtJs加载本地xml格式的数据
2009-12-12 16:24 5235<script type="text/jav ... -
ExtJs加载本地txt格式的数据
2009-12-12 10:56 2791/** * 动态加载本地txt格式的数据 */ ... -
ExtJs加载JSON格式树
2009-12-12 10:41 12730html文件中加入 <script src=" ... -
ExtJs生成静态树
2009-12-12 09:40 4990类Ext.tree.TreePanel 包: ... -
ExtJS笔记--Ext.form.FormPanel(四)综合实例
2009-09-12 19:11 13502//表单开始----------------------- ... -
ExtJS笔记--Ext.form.FormPanel(三)
2009-09-12 19:08 36611、afterlayout( Ext.Container ... -
ExtJS笔记--Ext.form.FormPanel(二)
2009-09-12 19:04 72011、layout : String 此容器所使用 ... -
ExtJS笔记--Ext.form.FormPanel(一)
2009-09-12 18:59 10772Ext.form.FormPanel 类全称: ... -
ExtJS笔记--Ext.form.FieldSet
2009-09-12 18:57 8930Ext.form.FieldSet 类全称: Ext.for ... -
ExtJS笔记--Ext.form.Field
2009-09-12 18:55 9752Ext.form.Field 类全称: Ext.form.F ... -
ExtJS笔记--Ext.form.DateField
2009-09-11 13:14 12639Ext.form.DateField 类全称: Ex ... -
ExtJS笔记--Ext.form.ComboBox
2009-09-11 07:00 8088Ext.form.ComboBox 类全称: Ex ... -
ExtJS笔记--Ext.form.Checkbox
2009-09-11 06:58 6573Ext.form.Checkbox 类全称: Ext.f ... -
ExtJS笔记--Ext..Button组件
2009-09-11 06:52 12534Ext..Button组件 例: Ext.Quick ... -
ExtJS笔记--applyTo和renderTo的区别
2009-09-11 06:48 4650extjs中经常会用到renderTo或applyTo配置选项 ...
相关推荐
ExtJs学习资料28-Ext.data.JsonStore数据存储器
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
从spket IDE 官网下载。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4,需要ext4.2.1.jsp2文件。
extjs-theme-bootstrap-master.zip
EXTJS-4.2.1.883
ext-4.2.1-gpl.7z
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
ext-7.0.0-gpl.zip
17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二)...
17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二)...
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs3.0 的 Typescript声明文件
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
软件介绍: Spket的ExtJS提示工具,内附需要加入ExtJS的提示内容文件ext-core-dev.js ,所需要的都整合为一个压缩包,一步到位直接使用。featurespluginsext-core-dev.js
ExtJs4环境,不包括例子,太大了没法上传
js框架 extjs-4.2.1.883.7z
Sencha Ext JS is the most comprehensive JavaScript framework for building data-intensive, cross-platform web and mobile applications for any modern device. Ext JS includes 140+ pre-integrated and ...
从ext官方论坛上下的。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.1.883