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
;
}
});