Ext 3.0 +ASP.NET2.0 可视化开发介绍

Ext Designer 总算出来了！！！基于Web的应用开发终于可以可视化开发了，而且可以几乎不敲1行代码。

准备工具：

（1）Ext Designer 1.0.2

（2）Visual Studio 2005

第一步：准备好JSON数据。

这里我们采用ASP.NET生成JSON数据。

代码如下，文件名取为： json.aspx

<%@ Page Language="C#" %> <% string json = "{/"result/": "; json += "["; json += "{/"name/": /"包青天/", /"TEL/":/"666/", /"sex/":/"男/", /"mail/":/"123@163.com/"},"; json += "{/"name/": /"张无忌/", /"TEL/":/"663456/", /"sex/":/"男/", /"mail/":/"22i@Q.com/"},"; json += "{/"name/": /"周青/", /"TEL/":/"1222/", /"sex/":/"男/", /"mail/":/"k3ei@sina.com/"},"; json += "{/"name/": /"杨过/", /"TEL/":/"138888/", /"sex/":/"男/", /"mail/":/"k4ei@263.com/"},"; json += "{/"name/": /"黄嵘/", /"TEL/":/"14423/", /"sex/":/"女/", /"mail/":/"2i@vip.com/"},"; json += "{/"name/": /"赵敏/", /"TEL/":/"124443/", /"sex/":/"女/", /"mail/":/"dd@lw.com/"}"; json += "], "; json += "/"totalCount/":6"; json += "}"; Response.Write(json); Response.End(); %>

第二步：用Ext Designer 制作界面

界面布局如下：

（1） 首先放置FormPanel，然后放置GridPane

（2）添加一个JSONStore

在可视化工具的右上方

然后依次设置JsonStore的Name，如图：

这里的字段名称要与JSON数据源匹配。

设置JsonStore 连接到asp.net：

设置url属性，例如：

并且勾选 autoload，自动加载数据

注意： 此处一共有3个属性很关键。

root

url

totalProperty

（3）设置Grid表格控件与JsonStroe的映射关系

首先设置Grid与JsonStore，点击Grid 后，在GridPane的旁边会有个齿轮的图标

点击后，会出现刚刚创建的MyStore，选中后即可。

然后绑定表格控件的列。

添加4个

列控件到GridPanel里面。然后依次设置 dataIndex 属性。

例如：姓名就设置为name

电话就设为TEL

设置完毕后，点击 预览按钮，即可以看到效果了。

至此，可视化操作完毕，不费吹灰之力就搞定！

Ext Designer 真是不错！