ExtJS GridPanel 分页

先看看演示效果:

ExtJS GridPanel 分页_第1张图片

先看PageProperty.html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="../../../extjs/resources/css/ext-all.css"></link>

<script type="text/javascript" src="../../../extjs/ext-base.js"></script>

<script type="text/javascript" src="../../../extjs/ext-all.js"></script>

<script type="text/javascript" src="../regiontableMgr/PageProperty.js"></script>

</head>

<body>

<div id="north"></div>

<div id="west"></div>

<div id="center"></div>

<div id="south"></div>

</body>

</html>

再看看PageProperty.js代码:

//餐台删除操作;

tableOpt = function(){//需要传参数:rowNumber;

return '<a href="javascript:tableDeleteHandler()"><img src="../../images/del.png">删除</img></a>'

};

Ext.onReady(function() {

//列模型;

cm_tableGrid = new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),{

header : "编号",

sortable : true,

dataIndex : "tableAlias",

width : 130,

fixed : true

},{

header : "名称",

sortable : true,

dataIndex : "tableName",

width : 230,

fixed : true

},{

header : "区域",

sortable : true,

dataIndex : "tableRegion",

fixed : true,

width : 130

},{

header : "最低消(¥)",

sortable : true,

dataIndex : "tableMinCost",

width : 130,

fixed : true

},{

header : "服务费率",

sortable : true,

dataIndex : "tableServiceRate",

width : 130,

fixed : true

},{

header : "状态",

sortable : true,

dataIndex : "tableStatusDisplay",

width : 130,

fixed : true

},{

header : "类型",

sortable : true,

dataIndex : "tableCategoryDisplay",

width : 130,

fixed : true

},{

header : "操作",

align : &#39center',

dataIndex : "tableOpt",

sortable : true,

renderer : tableOpt

}

]);

table_proxy = new Ext.data.HttpProxy({//远程加载数据;

url : &#39../../../QueryRegionTable.do',

//baseParams : {//传入restaurantID

//&#39restaurantID' : restaurantID

//}

});

table_GridRecord = new Ext.data.Record.create([

    {name : &#39tableAlias',type : &#39string',mapping : &#39tableAlias'},

    {name : &#39tableName',type : &#39string',mapping : &#39tableName'},

    {name : &#39tableRegion',type : &#39string',mapping : &#39tableRegion'},

    {name : &#39tableMinCost',type : &#39string',mapping : &#39tableMinCost'},

    {name : &#39tableServiceRate',type : &#39string',mapping : &#39tableServiceRate'},

    {name : &#39tableStatusDisplay',type : &#39string',mapping : &#39tableStatusDisplay'},

    {name : &#39tableCategoryDisplay',type : &#39string',mapping : &#39tableCategoryDisplay'},

    {name : &#39tableOpt',type : &#39string',mapping : &#39tableOpt'}

]);

//reader;

var reader = new Ext.data.JsonReader({

totalProperty : "totalProperty",

root : "root"

}, table_GridRecord);

//store_tableGrid;

var store_tableGrid = new Ext.data.Store({

proxy : table_proxy,

reader : reader

});

store_tableGrid.load({//传入分页参数;

params:{start:1,limit:27}

});

var grid = new Ext.grid.GridPanel({

title : "餐桌管理",

width : 1200,

cm : cm_tableGrid,

store : store_tableGrid,

height :650,

renderTo : Ext.getBody(),

bbar : new Ext.PagingToolbar({

store : store_tableGrid,

pageSize : 27,

displayInfo : true,

displayMsg : "本页显示第{0}条到第{1}条记录,一共{2}条",

emptyMsg : "没有记录"

})

});

});

再看看PagePropertyAction.java

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

public class PagePropertyAction extends Action {

@Override

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

System.out.println("akshdkahdkash");

response.setContentType("text/json; charset=utf-8");

// 起始索引

int start = Integer.parseInt(request.getParameter("start").toString());

// 页大小

int limit = Integer.parseInt(request.getParameter("limit").toString());

// 总记录数

int count = 1000;

StringBuffer sb = new StringBuffer();

sb.append("{totalProperty:" + count + ",root:[");

int end = start + limit;

if (end > count)

end = count; // 若是数据库,本行要删除

for (int i = start; i < end; i++) {

sb.append("{did:" + i + ",dname:'部门" + i + "'}");

if (i < end - 1) {

sb.append(",");

}

}

sb.append("]}");

response.getWriter().print(sb.toString());

response.getWriter().flush();

response.getWriter().close();

return null;

}

}

再看看配置文件:(此处的PageProperty是对应的是全面URL的PageProperty.do的)

<action path="/PageProperty"

    type="com.wireless.Actions.regionMgr.PagePropertyAction" scope="request">

</action>

你可能感兴趣的:(分页,ExtJs,gridPanel,bbar)