Ext JS Gridデータはページ別にロードします.
6236 ワード
Ext JSのGridはPaging Toolbarとdatastoreの協力によってリスト表示に対する制御を完成します.以下の例は実験のJavaScriptコードです.
バックエンドとこのJavaScriptが組み合わされたアクションは:
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var store = new Ext.data.JsonStore({
autoLoad : {
params : {
start : 0,
limit : 4
}
},
root : 'jsonObject',
totalProperty : 'totalCount',
idProperty : 'id',
remoteSort : true,
fields : ['id', 'text', 'cls'],
url : 'gridAction.action'
});
// store.load();
var jsongrid = new Ext.grid.GridPanel({
store : store,
columns : [{
id : 'id',
header : 'id',
width : 160,
sortable : true,
dataIndex : 'id'
}, {
header : 'text',
width : 75,
sortable : true,
dataIndex : 'text'
}],
listeners : {
'headerclick' : function(thisgrid, conlumeIndex) {
var o = {};
o['conlumeHeader'] = thisgrid.getColumnModel().getColumnHeader(conlumeIndex);
this.store.baseParams = o;
}
},
stripeRows : true,
height : 500,
width : 600,
title : 'Json Grid',
// config options for stateful behavior
stateful : true,
renderTo : 'griddiv',
stateId : 'jsongrid',
bbar : new Ext.PagingToolbar({
store : store, // grid and PagingToolbar
// using
// same store
displayInfo : true,
pageSize : 4,
prependButtons : true,
items : [' '],
doLoad : function(start) {
record_start = start;
var o = {};
pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
this.store.load({
params : o
});
}
})
});
});
バックエンドとこのJavaScriptが組み合わされたアクションは:
package com.struts2.action;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import net.sf.json.JSONArray;
public class GridAction {
private List<Menu> menus;
JSONArray jsonObject;
private Integer totalCount;
private Integer start = 0;
private Integer limit = 4;
private String conlumeHeader;
public String execute() {
menus = new ArrayList<Menu>();
Menu benz = new Menu();
benz.setText("Benz");
benz.setCls("folder");
benz.setLeaf(false);
benz.setId(10);
benz.setDate(new Date());
menus.add(benz);
Menu menu;
menu = new Menu();
menu.setText("S600");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(11);
menus.add(menu);
menu = new Menu();
menu.setText("SLK200");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(12);
menus.add(menu);
Menu bmw = new Menu();
bmw.setText("BMW");
bmw.setCls("folder");
bmw.setLeaf(false);
bmw.setId(20);
menus.add(bmw);
menu = new Menu();
menu.setText("325i");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(21);
menus.add(menu);
menu = new Menu();
menu.setText("X5");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(22);
menus.add(menu);
this.totalCount = menus.size();
Integer end = this.start+this.limit;
if(this.start+this.limit > this.totalCount)
{
end = this.totalCount;
}
jsonObject = JSONArray.fromObject(menus.subList(this.start, end));
try {
jsonObject.toString();
} catch (Exception e) {
}
return "success";
}
public JSONArray getJsonObject() {
return jsonObject;
}
public void setJsonObject(JSONArray jsonObject) {
this.jsonObject = jsonObject;
}
public Integer getTotalCount() {
return totalCount;
}
public void setTotalCount(Integer totalCount) {
this.totalCount = totalCount;
}
public Integer getStart() {
return start;
}
public void setStart(Integer start) {
this.start = start;
}
public Integer getLimit() {
return limit;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
public String getConlumeHeader() {
return conlumeHeader;
}
public void setConlumeHeader(String conlumeHeader) {
this.conlumeHeader = conlumeHeader;
}
}
actionのリリースは、struts.xmlに設定することにより、jsonのデータタイプに戻ります. <package name="jsonstore" extends="json-default" >
<action name="gridAction" class="com.struts2.action.GridAction">
<result name="success" type="json">
<param name="excludeNullProperties">true</param>
<param name="noCache">true</param>
</result>
</action>
</package>