Extjs-数据存储与传输-几种Store

项目中的store

var store = new Ext.data.GroupingStore({
    proxy : new Ext.data.HttpProxy({  
         url : '<%=rootpath%>/YhxxServlet' 
    }),
    baseParams: {
        method : 'browsePageData' 
    },
    reader: new Ext.data.JsonReader({  
        totalProperty : 'totalProperty',
        root: 'root',  
        fields : record
    }), 
    sortInfo : {    
       field : 'YH_BH',    
       direction : 'ASC'    
    }  
});

store传参的几种方法

//第一种
var store = new Ext.data.Store({
	baseParams: {
		params1 : '1',
		params2 : '2'
	}
});
//第二种
var params = {start:0,limit:limit};
store.load({params: params});
//第三种
store.load({
	params:{
		start:0,
		limit:10
	}
});
//第四种
store.baseParams=params;

1.Ext.data.Store

1.1.获取本地数据

var store = new Ext.data.Store({
	/*
		proxy的作用是通过内存获取原始数据,然后将获取的数据交给对应的读取器进行处理
		MemoryProxy只能从Javascirp对象获取数据,可以直接把数组或者JSON和XML格式的数据交给他处理
	*/
	proxy : new Ext.data.MemoryProxy([
		['tom',18],
		['cat',20]
	]),
	//用于将原始数据转换成record实例
	reader : new Ext.data.ArrayReader({
       	fields : [  
           {name : 'name',type : 'string'},    
           {name : 'age',type : 'int'}   
      	]  
   }) 
});
store.load();

1.2.去后台读取数据,后台必须返回JSON格式的数据,HttpProxy不支持跨域

如果Json包含root,index.jsp中JsonReader中必须写入配置项root : 'root'

list.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String json = "["+
		"{name:'tom', age:18},"+
		"{name:'team', age:18},"+
		"{name:'cat', age:25},"+
		"{name:'jock',age:25}"+
		"]";
	System.out.print(json);
	response.getWriter().write(json);
%>

index.jsp

var store = new Ext.data.Store({
	/*
		proxy的作用是通过http获取原始数据,然后将获取的数据交给对应的读取器进行处理
		HttpProxy使用HTTP协议,通过Ajax去后台读取数据,构造它时需要设置url:'list.jsp'参数
	*/
	proxy : new Ext.data.HttpProxy({
		url: 'list.jsp'
	}),
	reader : new Ext.data.JsonReader({
		fields : [
			{name : 'name',type : 'string'},  
			{name : 'age',type : 'int'} 
		]
	})
});
store.load();

2.Ext.data.ArrayStore读取本地数组

var store = new Ext.data.ArrayStore({
	fields: ['name','age'],
	data: [
		['tom',18],
 		['cat',20]
	]
});

3.Ext.data.SimpleStore()读取本地数组

SimpleStore=Store+MemoryProxy+ArrayReader

SimpleStore是不需要写load()方法

var store = new Ext.data.SimpleStore({
	data : [
		['tom',18],
		['cat',25]
	],
	fields : [
		{name : 'name',type : 'string'},
		{name : 'age',type : 'int'}
	]
});

4.Ext.data.JsonStore从后台读取JSON数据

JsonStore=Store+HttpProxy+JsonReader

JsonStore需要写load()方法

list:jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String json = "{root:["+
		"{name:'tom', age:18},"+
		"{name:'cat',age:25}"
	+"]}";
	System.out.print(json);
	response.getWriter().write(json);
%>

index.jsp:

var store = new Ext.data.JsonStore({
	url : 'list.jsp',
	root : 'root',
	fields : [
		{name : 'name',type : 'string'},
		{name : 'age',type : 'int'}
	]
});
store.load();

5.Ext.data.GroupingStore对数据分组

store.groupBy('sex');//重新对sex进行分组
store.clearGrouping();//清除分组

如果使用GroupingStore就要给grid设置view配置项

view: new Ext.grid.GroupingView({
	enableGroupingMenu:false,
	groupByText:'分组',
	showGroupsText:'显示',
	hideGroupedColumn:true,
   	forceFit:true,
   	groupTextTpl: '{text} ({[values.rs.length]}条数据)'
}),

5.1.分组本地数据

var store = new Ext.data.GroupingStore({
 	data : [
	 	['tom',18,'男'],
	 	['cat',25,'女'],
	 	['team',18,'男'],
	 	['jock',26,'女']
	],
 	reader : new Ext.data.ArrayReader({
 		fields : [
		 	{name : 'name',type : 'string'},
		 	{name : 'age',type : 'int'},
		 	{name : 'sex',type : 'string'}
		]
 	}),
	groupField : 'age',//设置分组字段
	sortInfo : {  
       field : 'age',  
       direction : 'desc'  
   	}
});

5.2.分组后台JSON数据

list:jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String json = "{root:["+
		"{name:'tom', age:18,sex:'男'},"+
		"{name:'team', age:18,sex:'女'},"+
		"{name:'cat', age:25,sex:'男'},"+
		"{name:'jock',age:25,sex:'女'}"
	+"]}";
	System.out.print(json);
	response.getWriter().write(json);
%>

index.jsp

var store = new Ext.data.GroupingStore({
	url : 'list.jsp',
	reader: new Ext.data.JsonReader({
		root: 'root',
		fields : [
		 	{name : 'name',type : 'string'},
		 	{name : 'age',type : 'int'},
		 	{name : 'sex',type : 'string'}
		]
	}),
	groupField : 'age',//设置分组字段
	sortInfo : {  
       field : 'age',  
       direction : 'desc'  
   	}
});
store.load();