ExtJS +Asp.NET实践(1)---GridPanel与服务器端数据交互
说明:1.我使用的版本为ext2.3版本
2.GridPanleDemo.aspx //前端承载数据实现代码
3.GridPanleStoreDemo.aspx//服务器端数据实现：主要返回JSON字符串
代码如下：
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 cm = new Ext.grid.ColumnModel([
{ header: '编号', dataIndex: 'id', sortable: true },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
//数据源
var ds = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
data:[],
url: "GridPanleStoreDemo.aspx",//服务器端数据返回页面,以JSON字符串返回
method: "POST",
success: function (response, opts) {
var obj =Ext.decode(response.responseText);
ds.proxy = new Ext.data.MemoryProxy(obj);
},
failure: function () { Ext.Msg.alert("Failure"); }
}),
//JsonStore不支持如下的数据源定义方式fields
// reader: new Ext.data.ArrayReader({},
// [
// { name: 'id' },
// { name: 'name' },
// { name: 'descn' }
// ])
fields: [
{ name: 'id' },
{ name: 'name' },
{ name: 'descn' }
]
});
ds.load();
var grid = new Ext.grid.GridPanel({
title: 'GridPanel与后台交互数据演示',
el: 'grid',
ds: ds,
cm: cm,
frame: true,
width: 1500,
height: 800,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
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)
{
IList<Users> userList=new List<Users>();
for (int i = 0; i < 10;i++ )
{
Users u = new Users();
u.id = i;
u.name = "张三" + i.ToString();
u.descn = "描述" + i.ToString();
userList.Add(u);
}
System.Text.StringBuilder sbStr = new System.Text.StringBuilder();
JavaScriptSerializer jSerializer = new JavaScriptSerializer();
jSerializer.Serialize(userList,sbStr);
Response.Write(sbStr.ToString());
}
}
class Users
{
public int id { set; get; }
public string name { set; get; }
public string descn { set; get; }
}
}
