日期:2014-05-16  浏览次数:20341 次

extjs 数据存储和提交
一、ajax提交的实现方式。

1)Ext.data.Connection

继承自Ext.lib.Ajax

必须new 的方式实现

var conn = new Ext.data.Connection({ autoAbort: false, defaultHeaders: { referer: 'http://localhost/ext/extbook-sample/' }, disableCaching : false, extraParams : { name: 'name' }, method : 'GET', timeout : 300, url : '01.txt' }); conn.request({ success: function(response) { Ext.Msg.alert('info', response.responseText); }, failure: function() { Ext.Msg.alert('warn', 'failure'); } });


2)Ext.Ajax.request

继承自Ext.data.Connection 的比较多的方式。

Ext.Ajax.request({ url: '07-01.txt', success: function(response) { Ext.Msg.alert('成功', response.responseText); }, failure: function(response) { Ext.Msg.alert('失败', response.responseText); }, params: { name: 'value' } });
url:比较的路径

success:提交成功和失败的闲应方法。

params: 提交的参数,可以是json数据,或者是Array数据格式。

对比Ext.data.Connection 不需要new实现。

下面一句话是原文,不理解。。。

Connection是为了给Ext.data中的各种proxy提供Ajax功能,分配不同的实例更有利于分别管
理。Ext.Ajax为用户提供了一个简易的调用接口


3)Ext.lib.Ajax

最低层的实现


Ext.lib.Ajax.request( 'POST', '07-01txt', {success: function(response){ Ext.Msg.alert('成功', response.responseText); },failure: function(){ Ext.Msg.alert('失败', response.responseText); }}, 'data=' + encodeURIComponent(Ext.encode({name:'value'})) );

和Ext.ajax.request的区别是, 这里的参数是有顺序的。而且,提交的参数只能是array的格式。

比与Ext.Ajax相比,Ext.lib.Ajax的唯一优势就是它可以在EXT 1.x中使用。


二、extjs中的Data


1) Ext.data.Record 与 Ext.data.store

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组
成部分。如果把Ext.data.Store看作是一张二维表,那么它的每一行就对应一个Ext.data.
Record实例。

Ext.data.Record.create可以创建不同的数据类型,就像我们的class。

var PersonRecord = Ext.data.Record.create([ {name: 'name', type: 'string'}, {name: 'sex', type: 'int'} ]);

PersonRecord就是一个class,

我们可以

var boy = new PersonRecord({
name: 'boy',
sex: 0
});

得到一个对象,也就是一个Record

得到Record中的数据方式 boy.data[‘name’]; boy.get(‘name’); 修改数据boy.set(‘name’,’jony’);也可以直接boy.data

[‘name’]=”jony”但是直接修改不能回滚。boy.commit()提交数据.boy.reject() 回滚。。



Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是。ComboBox,都是通过它实现数据读取、类型

转换、排序分页和搜索等操作的。


var data = [
['boy', 0],
['girl', 1]
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();

每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取始数据,reader用于将原始数据转换成

Record实例。 上面代码中 PersonRecord就是类型。data就是数据


一个store中有多个record。 store和record是聚合的关系。


2)Ext.data.Store 的proxy和reader


A)Proxy

MemoryProxy: 只能从JavaScript对象获得数据,可以直接把数组,或JSON和XML格式的数
交给它处理,如下面的代码所示。

使用方法:

var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);

如果给定了url则是HttpProxy。

HttpProxy:HttpProxy使用HTTP协议,通过Ajax去后台取数据,构造它时需要设置url:'xxx.jsp'请注意,这里的HttpProxy不支持跨域

使用方法:var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});

后台代码:

response.setContentType("application/x-json"); Writer out = response.getWriter(); out.print("[" + "['id1','name1','descn1']" + "['id2','name2','descn2']" + "]");


ScriptTagProxy :ScriptTagProxy的用法几乎和HttpProxy一样,

后台代码:

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页面里添加一个

<scripttype="text/javascript"src="xxx.jsp"