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\":\"[email protected]\"},"; json += "{\"name\": \"张无忌\", \"TEL\":\"663456\", \"sex\":\"男\", \"mail\":\"[email protected]\"},"; json += "{\"name\": \"周青\", \"TEL\":\"1222\", \"sex\":\"男\", \"mail\":\"[email protected]\"},"; json += "{\"name\": \"杨过\", \"TEL\":\"138888\", \"sex\":\"男\", \"mail\":\"[email protected]\"},"; json += "{\"name\": \"黄嵘\", \"TEL\":\"14423\", \"sex\":\"女\", \"mail\":\"[email protected]\"},"; json += "{\"name\": \"赵敏\", \"TEL\":\"124443\", \"sex\":\"女\", \"mail\":\"[email protected]\"}"; 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 真是不错！