ExtJS +Asp.NET实践(2)---GridPanel 分页
//客户端
1>.GridPanleDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanleDemo.aspx.cs"
Inherits="WebApplication1.ext2_3Pro.eDemo1" %>
<!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>
<link rel="stylesheet" type="text/css" href="../ext-2.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-2.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.3.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var sm=new Ext.grid.CheckboxSelectionModel();
//模板列
var cm = new Ext.grid.ColumnModel([
sm,
{ header: '编号', dataIndex: 'id', sortable: true },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
//数据源
var ds = new Ext.data.JsonStore({
totalProperty:"TotalCount",//总记录数
isProperty:"threadid",
root:"UserList",//数据列表映射字段
remoteSort:true,
proxy:new Ext.data.ScriptTagProxy({url:"GridPanelStoreDemo.aspx"}),//效率比HttpProxy搞
fields: [
{ name: 'id' },
{ name: 'name' },
{ name: 'descn' }
]
});
//传递分页等参数
ds.load({params:{start:1,limit:2}});
//分页栏
var pageBar=new Ext.PagingToolbar({pageSize:2,store:ds,displayInfo:true,emptyMsg:"没有数据可显示！"});
var grid = new Ext.grid.GridPanel({
title: 'GridPanel与后台交互数据演示',
el: 'grid',
ds: ds,
cm: cm,
sm:sm,
frame: true,
width: 1500,
height: 800,
viewConfig: {
forceFit: true
},
bbar:pageBar,
loadMask: {msg:'数据正在加载中，请稍后.....'}
});
grid.render();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid">
</div>
</form>
</body>
</html>
//服务器端
2>.GridPanleStoreDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanleStoreDemo.aspx.cs" Inherits="WebApplication1.ext2_3Pro.GridPanleStoreDemo" %>
3>.GridPanleStoreDemo.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
namespace WebApplication1.ext2_3Pro
{
public partial class GridPanleStoreDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strCall=Request.QueryString["callback"];
int curPageIndex=Convert.ToInt32(Request.QueryString["start"]);
int pageSize=Convert.ToInt32(Request.QueryString["limit"]);
Response.Write(strCall+"("+ToJSonString(curPageIndex,pageSize)+")");
}
private string ToJSonString(int currentPageIndex,int pageSize)
{
//这里只是模拟实现数据
IList<Users> userList=new List<Users>();
for (int i = 0; i < 10;i++ )
{
Users u = new Users();
u.id = currentPageIndex++;
u.name = "张三" + u.id.ToString();
u.descn = "描述" + u.id.ToString();
userList.Add(u);
}
Record record=new Record();
record.UserList=userList;
record.TotalCount=10;//数据记录数
System.Text.StringBuilder sbStr = new System.Text.StringBuilder();
JavaScriptSerializer jSerializer = new JavaScriptSerializer();
jSerializer.Serialize(record,sbStr);
return sbStr.ToString();
}
}
class Record
{
public int TotalCount{set;get;}
public IList<User> UserList{set;get;}
}
class Users
{
public int id { set; get; }
public string name { set; get; }
public string descn { set; get; }
}
}
//最近有朋友说这样写实现不了？因为当时是在公司写的测试，也不知道博客园上能上传源码，所以就没上传了，为了证明我这样做可行，我今天把源码自己写了一遍，放上来。
//其实像GridPanel传递数据有很多种办法，比如通过ashx文件传递==，当时只是测试就整了个aspx页面，为什么传递数据的上面没html标签呢，其实很简单，因为gridPanel接受的数据格式决定，我为了在后台少写一句Respone.End()方法就这样做了，呵呵，以前没写过博客，现在写写发现自己的表达能力其实很差。废话不说。
//我写的这种方式只是验证了下ExtJS是否能与实体类之间建立关联，因为目前的业务逻辑层都封装成实例，而ExtJS GridPanel接受的Json，所以我就在前台增加写能识别后台传递的Json数据的属性,比如：
//数据源
var ds = new Ext.data.JsonStore({
totalProperty:"TotalCount",//总记录数
isProperty:"threadid",
root:"UserList",//数据列表映射字段
remoteSort:true,
proxy:new Ext.data.ScriptTagProxy({url:"GridPanleStoreData.aspx"}),//效率比HttpProxy搞
fields: [
{ name: 'id' },
{ name: 'name' },
{ name: 'descn' }
]
});
这个很关键的，否则前台肯定不认识，更不会显示了。
