Extjs 3.2.1 GridPanel 分页（数据源为aspx返回的xml格式数据流）

刚开始学习Extjs，百度+股沟了很久，看了很多例子，发现还是官方的API最管用，其实重要的还是在理解其原理上

比如分页，是按照传给aspx页面的params: { start: 0, limit: 26}来进行取值的，其实分页还是在后台自己处理的

另外增加了网上找的导出数据到Excel以便打印的功能

 

废话少说，代码展示一切：

 

主页面：

 

Default.aspx

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >

<% -- ExtJS库 -- %>
< link rel ="stylesheet" type ="text/css" href ="ExtJS/resources/css/ext-all.css" />
< script type ="text/javascript" src ="ExtJS/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ExtJS/ext-all.js" ></ script >

<% -- 数据处理JS -- %>
< script type ="text/javascript" src ="GetData.js" charset ="gb2312" ></ script >

</ head >
< body >

< div id ="myGrid" >

</ div >

</ body >
</ html >

 

 

 

 

取值页面后台Data.aspx.cs 

Data.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Data : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
int start = Int32.Parse(Request[ " start " ]);
int limit = Int32.Parse(Request[ " limit " ]);

List < string > datalist = new List < string > ();
datalist = GetData();
datalist.TrimExcess();

int end = start + limit; // 得到数据总量

string datastr = " <records><totalRecords> " + datalist.Count.ToString() + " </totalRecords> " ;

// 该判断用于最后一页数据小于每页行数的情况，更新要返回的limit
if (end > datalist.Count) // 如果请求数据总量大于实际数据总量
{
limit = datalist.Count - start; // 修改将要取值的条数
}

for ( int i = 0 ; i < limit; i ++ )
{
datastr += datalist.GetRange(start, limit)[i].ToString(); // 取值
}

datastr += " </records> " ;

Response.ContentType = " text/xml " ;
Response.Write(datastr);
}

private List < string > GetData()
{
List < string > datalist = new List < string > ();
// string data = "<records><totalRecords>100</totalRecords>";
string data = "" ;
for ( int i = 1 ; i <= 100 ; i ++ )
{
data = " <record> " ;
data += " <id> " + i.ToString() + " </id> " ;
data += " <name> " + " 猎 " + i.ToString() + " 人 " + " </name> " ;
data += " <time> " + DateTime.Now.ToLongTimeString() + " </time> " ;
data += " </record> " ;

datalist.Add(data);
data = "" ;
}

return datalist;
}
}

 

 

核心JS文件 

 

GetData.js

var myInfo = Ext.data.Record.create([
{name: ' name ' , mapping: ' name ' },
{name: ' time ' ,mapping: ' time ' }
]);

var myReader = new Ext.data.XmlReader({
totalProperty: ' totalRecords ' ,
record: ' record ' ,
idProperty: ' id '
},myInfo);

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ' Data.aspx '
}),
reader:myReader
});

// 重载RowNumberer，使每页的行编号自动增加
Ext.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {
return store.lastOptions.params.start + rowIndex + 1 ;
}
});

var rownum = new Ext.grid.RowNumberer();
rownum.width = 40 ;

var cm = new Ext.grid.ColumnModel([
rownum,
{ header: ' 姓名 ' , dataIndex: ' name ' },
{ header: ' 时间 ' , dataIndex: ' time ' }
]);

Ext.onReady( function () {
Ext.BLANK_IMAGE_URL = ' s.gif ' ;
var grid = new Ext.grid.GridPanel({
renderTo: ' myGrid ' ,
loadMask: { msg: ' 数据请求中，请稍后... ' },
cm: cm,
store: ds,
stripeRows: true , // 隔行颜色不同
title: ' 事件记录报表 ' ,
tbar: new Ext.Toolbar({
width: 600 ,
items: [
' 查询时间 ' ,
' - ' ,
{
text: ' 打印 ' ,
cls: ' x-btn-text ' ,
handler: function () {
downloadViewData(grid);
}
}
]
}),
width: 600 ,
height: 500 ,
bbar: new Ext.PagingToolbar({
pageSize: 26 ,
store: ds,
displayInfo: true ,
beforePageText: ' 第 ' ,
afterPageText: ' /{0}页 ' ,
firstText: ' 首页 ' ,
prevText: ' 上一页 ' ,
nextText: ' 下一页 ' ,
lastText: ' 尾页 ' ,
displayMsg: ' 显示 第 {0} 条 到 第 {1} 条 记录，共 {2} 条记录 ' ,
emptyMsg: ' 无记录 '
})
});
ds.load({
params: { start: 0 , limit: 26 }
});

function downloadViewData(grid) {
try {
var xls = new ActiveXObject( ' Excel.Application ' );
} catch (e) {
alert( ' 未安装Excel软件或者当前浏览器禁止执行控件 ' );
return '' ;
}

var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();

xls.visible = true ;
var xlBook = xls.Workbooks.Add;
var xlSheet = xlBook.Worksheets( 1 );

var temp_obj = [];

// 获取列标
for (i = 1 ; i < colCount; i ++ ) {
if (cm.isHidden(i) == true ) {
// 隐藏列不打印
} else {
temp_obj.push(i);
}
}

// 获取列标题值
for (i = 1 ; i <= temp_obj.length; i ++ ) {
xlSheet.Cells( 1 , i).Value = cm.getColumnHeader(temp_obj[i - 1 ]);
}

var store = grid.getStore();
var recordCount = store.getCount();
var view = grid.getView();

// 获取数据值
for (i = 1 ; i <= recordCount; i ++ ) {
for (j = 1 ; j <= temp_obj.length; j ++ ) {
xlSheet.Cells(i + 1 , j).Value = view.getCell(i - 1 , temp_obj[j - 1 ]).innerText;
}
}

xlSheet.Columns.AutoFit;
xls.ActiveWindow.Zoom = 75 ; // 设置Excel单元格的大小
xls.UserControl = true ;
xls = null ;
xlBook = null ;
xlSheet = null ;
}
});

 

转载于:https://www.cnblogs.com/jiewei915/archive/2010/08/20/1804372.html