前臺頁面：
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridShowTest.aspx.cs" Inherits="ExtPra.gridShowTest" %>
<!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>顯示gird</title>
<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>
<script type="text/javascript" src="ExtJS/build/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
Ext.BLANK_IMAGE_URL="ExtJS/docs/resources/s.gif"; //空白圖片設置為本地,否則按默認方式從官方網(wǎng)站下載(在聯(lián)網(wǎng)環(huán)境下)
var url="myGridJson.aspx?Param=select";
var sm=new Ext.grid.CheckboxSelectionModel();//復選按鈕
var cm=new Ext.grid.ColumnModel //列模版定義(該例中定義顯示數(shù)據(jù)庫表Employees中的四列)
([
sm,//在每行的第一列添加一個復選按鈕 ,
new Ext.grid.RowNumberer({header:"自動顯示行號",width:100}),//添加自動顯示行號的列
{header:'員工編號',dataIndex:'EmployeeID',sortable:true, width:100},
{header:'名字',dataIndex:'LastName',sortable:true,width:100,editor:new Ext.form.TextField()},
{header:'姓氏',dataIndex:'FirstName',sortable:true,width:100,editor:new Ext.form.TextField()},
{header:'出生日期',dataIndex:'BirthDate',sortable:true,width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')} //,renderer:Ext.util.Format.dateRenderer('Y年m月d日')
]);
// cm.defaultSortable=true; //設置所有列是可以排序的
var fields= //字段
[
{name:"EmployeeID",mapping: 'EmployeeID'},
{name:"LastName",mapping: 'LastName'},
{name:"FirstName",mapping:'FirstName'},
{name:"BirthDate",mapping:'BirthDate',type:'date'}
];
//store 是Ext中數(shù)據(jù)存儲的和數(shù)據(jù)交換的緩沖區(qū) 在grid等控件中要使用store作為填充的數(shù)據(jù)源
var store=new Ext.data.Store //JsonReader支持分頁 totalProperty獲得記錄的總數(shù) ,root是從服務器返回的json串
({
proxy:new Ext.data.HttpProxy({url:url}),//proxy告訴我們從哪里獲取數(shù)據(jù)
reader:new Ext.data.JsonReader //reader 告訴我們?nèi)绾谓馕鰯?shù)據(jù)
({
totalProperty:"totalCount",root:"root",//totalCount
fields:fields //fields 告訴我們按照定義的規(guī)范進行解析 每行讀取4個數(shù)據(jù),第一個是EmployeeID 第二個是LastName ...
}) //與ColumnModel中的dataIndex想對應,這樣ColumnModel就知道那列應該顯示那條數(shù)據(jù)了
// remoteSort:true //支持服務器端排序 設置 store.remoteSort = true ,會向后臺提交兩個參數(shù) sort ,dir,sort排序字段 dir升序或降序
