Ext Grouping Grid分组添加分页
Ext Grouping Grid增加分页效果，和普通的Ext Grid分页一样，增加PagingToolbar即可，然后依据PagingToolbar发送的分页参数page，返回需要的数据就行，配置分组后会自动分组返回的数据。
Ext Grouping Grid增加分页源代码如下
groupgrid-paging.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext Grouping Grid分组分页</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
Ext Grouping Grid增加分页效果
<script>
Ext.onReady(function () {
Ext.define('ExtGroupingGridPaging', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine', 'xxoo']
});
var store = Ext.create('Ext.data.Store', {
model: 'ExtGroupingGridPaging',
pageSize: 50,
autoLoad: true,
groupField: 'cuisine',
sorters: ['cuisine', 'name'],
proxy: { type: 'ajax', url: 'cb.ashx', reader: { root: 'd', type: 'json'} }
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
iconCls: 'icon-grid',
frame: true,
store: store,
width: 450,
height: 200,
title: 'Ext Grouping Grid增加分页效果',
resizable: true,
features: [groupingFeature],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}, {
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine'
}, {
text: 'xxoo',
flex: 1,
dataIndex: 'xxoo'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});
</script>
</body>
</html>
cb.ashx数据源
<%@ WebHandler Language="C#" Class="cb" %>
using System;
using System.Web;
public class cb : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
string s = "{d:[",page=context.Request.QueryString["page"];
Random r = new Random();
for (int i = 0; i < 50; i++) {
s += (i == 0 ? "" : ",") + "{name:'name" + i.ToString() + "', cuisine:'page-" + page + "-cuisine" + r.Next(1, 6) + "', xxoo:'xxoo" + i.ToString() + "'}";
}
s += "],total:230}";
context.Response.Write(s);
}
public bool IsReusable
{
get {
return false;
}
}
}
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext Grouping Grid分组添加分页