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\":\"[e-mail]\"},";
       json += "{\"name\": \"张无忌\", \"TEL\":\"663456\", \"sex\":\"男\", \"mail\":\"[e-mail]\"},";
       json += "{\"name\": \"周青\", \"TEL\":\"1222\", \"sex\":\"男\", \"mail\":\"[e-mail]\"},";
       json += "{\"name\": \"杨过\", \"TEL\":\"138888\", \"sex\":\"男\", \"mail\":\"[e-mail]\"},";
       json += "{\"name\": \"黄嵘\", \"TEL\":\"14423\", \"sex\":\"女\", \"mail\":\"[e-mail]\"},";
       json += "{\"name\": \"赵敏\", \"TEL\":\"124443\", \"sex\":\"女\", \"mail\":\"[e-mail]\"}";
       json += "], ";
       json += "\"totalCount\":6";
       json += "}";
    Response.Write(json);
    Response.End();
%>

第二步：用Ext Designer 制作界面

界面布局如下：

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

（2）添加一个JSONStore

在可视化工具的右上方

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

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

设置JsonStore 连接到asp.net：

设置url属性，例如：http://192.168.192.65/Test/Gwxxll_JSON/json.aspx

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

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

root

url

totalProperty

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

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

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

然后绑定表格控件的列。

添加4个

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

例如：姓名就设置为name

电话就设为TEL

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

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

Ext Designer 真是不错！