刚开始学习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({
600,
items: [
'查询时间',
'-',
{
text: '打印',
cls: 'x-btn-text',
handler: function () {
downloadViewData(grid);
}
}
]
}),
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;
}
});