一 開發環境
Windows 2003
VS 2005
Aptana
Ext2.0
二 客戶端代碼
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/> <!-- GC --><!-- LIBS --> <script type="text/javascript" src="adapter/ext/ext-base.js"> </script> <!-- ENDLIBS --> <script type="text/javascript" src="ext-all.js"> </script> <script type="text/javascript" src="array-grid.js"> </script> <link rel="stylesheet" type="text/css" href="grid-examples.css"/> <!-- Common Styles for the examples --> </head> <body> </script> <!-- EXAMPLES --><h1>Array Grid Example</h1> <p> This example shows how to create a grid from Array data. </p> <p> Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>. </p> <div id="grid-example" style="height:265px;"></div> </body></html>JS:
Ext.onReady(function(){
var data = {totalProperty:10,root:[{id:0,name:'name0',descn:'descn0'},{id:1,name:'name1',descn:'descn1'},{id:2,name:'name2',descn:'descn2'},{id:3,name:'name3',descn:'descn3'},{id:4,name:'name4',descn:'descn4'},{id:5,name:'name5',descn:'descn5'},{id:6,name:'name6',descn:'descn6'},{id:7,name:'name7',descn:'descn7'},{id:8,name:'name8',descn:'descn8'},{id:9,name:'name9',descn:'descn9'}]};
var data 
var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([sm,{ header: '編號', dataIndex: 'id' }, { header: '名稱', dataIndex: 'name' }, { header: '描述', dataIndex: 'descn'
}]); var ds = new Ext.data.Store({// proxy: new Ext.data.MemoryProxy(data), proxy: new Ext.data.HttpProxy({ url:'Ajax.aspx' }), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [{ name: 'id' }, { name: 'name' }, { name: 'descn' }]) }); // create the Grid var grid = new Ext.grid.GridPanel({ ds: ds, cm: cm, height: 600, width: 500, title: 'Array Grid', bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', emptyMsg: "沒有記錄" }) }); grid.render('grid-example'); grid.getSelectionModel().selectFirstRow(); //ds.load(); ds.load({ params: { start: 0, limit: 10 } });
});三 服務端代碼
新建一個Ajax.aspx頁面
using System;using System.Data;using System.Web;public partial class Ajax : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { string start = this.Request.Form["start"]; string count = this.Request.Form["limit"]; string result; int startNum; int countNum; try { startNum = int.Parse(start); countNum = int.Parse(count); string tmp = "id:{0},name:'name{0}',descn:'descn{0}'"; string record = "{"; for (int i = startNum; i < startNum + countNum; i++) { if (i != startNum) record += ",{"; record += String.Format(tmp, i); record += "}"; } string resultTemplate = "totalProperty:100,root:[{0}]"; result = "{" + String.Format(resultTemplate, record) + "}"; } catch { result = “”; } Response.Write(result); }}
四 測試
代碼不是很難，但剛開始調試的時候，一直沒有出來結果。後來，直接讀取本地的JSON數據，發現一切都是正常的。調試的時候發現發現Ajax.aspx頁面除了輸出result之外，還輸出了新建Ajax.aspx時默認的信息，刪除只剩下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Ajax" %>時，終天可以正常顯示了。顯示效果圖：