1. 程式人生 > >Extjs-資料儲存與傳輸-幾種Store

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();