ExtJs中Store简介(秘籍)

1.什么store?
Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类)
最终主要用于提供给panel去显示.
Store由Proxy(数据源)和DataReader(解读数据)组成。
一.(Proxy)数据源:一般是后台的值,习惯性的把它转换成json对象给store(注:个人理解)
二.(DataReader)读取数据:获得了数据后需要解析数据,DataReader(fields属性其实是Record对象的)解析数据并指定格式.
三.store存储好的数据最后交给panel

2.store中重要的属性和方法
属性:data、proxy、reader、url、root ....
方法:load
1、如果配置了data,则proxy和url无效,且不需要调用load方法来生成Record集合


view sourceprint?1.var store=new Ext.data.ArrayStore({
2.       
fields: ['DEPTNO', 'DNAME', 'LOC'],
3.       
data:Ext.datas.mess  //引用data.js 数据
4.       
});
2、如果没有配置data,则必须设置proxy或url,或两者都设置。此时,如果没有将autoLoad设置为true,
那么需要手动进行load方法的调用。就是为了得到数组、Json或Xml等格式的数据。


view sourceprint?01.//JsonStore是负责后台返回json对象的处理http://
02.   
var store1 = new Ext.data.JsonStore({
03.       
autoDestroy: true,
04.       
url: 'extjsTest/extjs_getEmpByDeptNo.action',
05.       
storeId: 'myStore',
06.       
root:"emp",//json对象组 类似这种对象:{emp:[{EMPNO:'xx',....}]}
07.       
fields: [
08.           
{name: 'EMPNO', mapping:'EMPNO', type: 'float'},
09.           
{name: 'ENAME', mapping:'ENAME',type: 'string'}, 
10.           
{name : 'HIREDATE', type : 'date', mapping : 'HIREDATE'},
11.           
{name: 'DEPTNO', mapping:'DEPTNO', type: 'float'}
12.       
]
13.   
});
3、reader是必须的,用以指定数据解析器,
需要根据获得的数据格式指定相应类型的解析器。(上面简写了,其实fidlds是由DataReader对象创建Record实例的一个属性)
4、如果没有指定proxy,但指定了url,则会默认用HttpProxy作为数据源,并将url作为HttpProxy实例化时的参数。


view sourceprint?1.    

2.
var myStore = new Ext.data.Store({
3.   
reader: myReader,
4.   
proxy : new Ext.data.HttpProxy({
5.       
method: "POST",
6.       
url: 'extjsTest/extjs_getEmpByDeptNo.action',
7.   
}) 
8.});
5、root是指定json组(个人这样理解的),算了,看json传过来的对象应该清楚了


view sourceprint?1.{emp:[{"EMPNO":7369,"HIREDATE":"1980-12-17","ENAME":"SMITH"},{"EMPNO":7499,"HIREDATE":"1981-02-20","ENAME":"ALLEN"},{"EMPNO":7521,"HIREDATE":"1981-02-22","ENAME":"WARD"},{"EMPNO":7566,"HIREDATE":"1981-04-02","ENAME":"JONES"},{"EMPNO":7654,"HIREDATE":"1981-09-28","ENAME":"MARTIN"}]}

你可能感兴趣的:(JavaScript,UI,json,Ajax)