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"