ExtJs Store注意事项

Store,即数据存储器,主要用于提供给GridPanel,EditorGridPanel等关联数据用的。

Store由Proxy(数据源)和DataReader(数据解析器)组成。

Store包含多条Ext.data.record对象

换句话说:
第一、数据存储器需要有数据才能叫数据存储器,而这个数据就是通过数据源获得;
第二、获得数据后还需要通过数据解析器将这些数据进行解析,从而成为客户端认可的符合一定格式的数据。
通过以上两个条件,这个数据存储器才能真正的为GridPanel等服务。

现在来看一下Store是如何运作的:
看API,我们只需要关心他的4个配置选项:data、proxy、reader、url
以及他的1个方法:load

1、如果配置了data,则proxy和url无效,且不需要调用load方法来生成Record集合

2、如果没有配置data,则必须设置proxy或url,或两者都设置。此时,如果没有将autoLoad设置为true,那么需要手动进行load方法的调用。就是为了得到数组、Json或Xml格式的数据。

3、reader是必须的,用以指定数据解析器,需要根据获得的数据格式指定相应类型的解析器。

4、如果没有指定proxy,但指定了url,则会默认用HttpProxy作为数据源,并将url作为HttpProxy实例化时的参数。

5、如果data封装的是数组格式的数据,则用ArrayReader作为解析器,也就是需要在Store实例化时,做如下的配置:

Js代码 收藏代码
  1. reader:newExt.data.ArrayReader({...});


6、如果data封装的是json格式的数据,则用JsonReader作为解析器,也就是需要在Stroe实例化时,做如下的配置:
Js代码 收藏代码
  1. reader:newExt.data.JsonReader({...});


7、如果data封装的是xml格式的数据,则用XmlReader作为解析器,也就是需要在Store实例化时,做如下的配置:
Js代码 收藏代码
  1. reader:newExt.data.XmlReader({...});
8、如果store里面的数据修改了,可以通过store.commitChages()或record.commit()来修改数据,也可有恢复之前的数据store.rejectChages()或record.reject(),注意:是在没有提交的情况下才能恢复。

下面是一个Store的例子:注:store.baseParams={aa:'b'}

Ext.onReady(function(){
	var proxy=new Ext.data.HttpProxy({
		url: '/My_ExtJs/Login-query.action',
		method:'POST'
	});
	var myReader = new Ext.data.JsonReader({
	    idProperty: 'DEPTNO',
	    root: 'data',//对应后台的数据的key
	    totalProperty: 'total',//对应后台的属性总记录数,不是总页数
	    fields: [//也可以通过Ext.data.record.create来创建
	        {name: 'deptno', mapping: 'DEPTNO'},//mapping是从后台传输过来的JSON对象的值,
	        {name: 'dname', mapping: 'DNAME'},
	        {name: 'loc', mapping: 'LOC'}
	    ]
	});
	var store = new Ext.data.Store({
		proxy : proxy,  
	    storeId: 'myStore',
	    reader:myReader
	});
	store.load({
		params:{start:0,limit:2},
		callback:function(r,ops,success){//当success=200的时候
//			store.each(function(record){
//				alert(record.get('deptno'));
//			});
//			var newRecord=new Ext.data.Record({name:"Tom",age:22}); 
//			store.add(newRecord); 
//			store.insert(3,newRecord);
			alert(store.getCount()+" "+store.getTotalCount());
//			alert(store.getAt(3).get('name'));//得到的是record.get('name')
		}
	});
//	alert(store.getCount());//当访问后台还没回来的时候已经跑完了,所以为0
});

store.load()方法应放到grid之后来装载,才能触发loadmask。

配置HttpProxy中的api

Ext.data.Api.actions['read'] = 'load';

proxy : new Ext.data.HttpProxy({
// method : 'GET',
// url : path + '/servlet/My_Servlet'
api : {
'load' : {
'method' : 'POST',
url : path + '/servlet/My_Servlet'
}
}
})

store中修改record一条记录的话,

alert(myStore.getAt(0).get('mid'));

myStore.getAt(0).set('mid','ab');

alert(myStore.getModifiedRecords()[0].get('mid'));

转自:http://yahaitt.iteye.com/blog/234409





你可能感兴趣的:(ExtJs)