Ext2.0 + .Net 2.0应用实例（1）

一 开发环境
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 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" %>时，终天可以正常显示了。显示效果图：