extjs 数据存储和提交
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"> </script>标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访
问数据的问题。。
B)Reader
JsonReader: JSON是一种非常重要的数据格式，key:value, 与数组相比，JSON的最大优点就是支持分页，
var data = { id:0, totalProperty:2, successProperty:true, root:[ {id:'id1',name:'name1',descn:'descn1',person:{ id:1,name:'man',sex:'male' }}, {id:'id2',name:'name2',descn:'descn2',person:{ id:2,name:'woman',sex:'female' }} ] }; var reader = new Ext.data.JsonReader({ successProperty: "successproperty", totalProperty: "totalProperty", root: "root", id: "id" }, [ 'id','name','descn', {name:'person_name',mapping:'person.name'}, {name:'person_sex',mapping:'person.sex'} ]);
ArrayReader :ArrayReader的作用是从二维数组里依次读取数据，然后生成对应的Record.缺点是不支持分页
var reader = new Ext.data.ArrayReader({ id:1 },[ {name:'name',mapping:1}, {name:'descn',mapping:2}, {name:'id',mapping:0}, ]);
XmlReader
实际开发时，并不需要每次都对proxy、reader、store这三个对象进行配置，EXT为我们
提供了几种可选择的整合方案。
SimpleStore = Store + MemoryProxy + ArrayReader
var ds = Ext.data.SimpleStore({ data: [ ['id1','name1','descn1'], ['id2','name2','descn2'] ], fields: ['id','name','descn'] });
JsonStore = Store + HttpProxy + JsonReader
var ds = Ext.data.JsonStore({ url: 'xxx.jsp', root: 'root', fields: ['id','name','descn'] });
Ext.data.GroupingStore对数据进行分组
var ds = new Ext.data.GroupingStore({ data: [ ['id1','name1','female','descn1'], ['id2','name2','male','descn2'], ['id3','name3','female','descn3'], ['id4','name4','male','descn4'], ['id5','name5','female','descn5'] ], reader: new Ext.data.ArrayReader({ fields: ['id','name','sex','descn'] }), groupField: 'sex', groupOnSort: true });
