Ext2.0 + .Net 2.0应用实例（1）_estjs+net实例-CSDN博客

本文链接：https://blog.csdn.net/wormwormwormworm/article/details/2194631

本文介绍如何使用ExtJS创建网格并展示数组数据，包括客户端配置、服务器端响应JSON数据及调试过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开发环境
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>

<title>Untitled Document</title>

</script>

</script>

</script>

</head>

<body>

</script>

<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>

</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'

}, [{

}, {

}, {

}])

});

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