Extjs-資料儲存與傳輸-幾種Store
阿新 • • 發佈:2019-02-07
專案中的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' } });
//第一種
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();