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屬性，例如：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? 真是不錯！

?

轉載于:https://www.cnblogs.com/hgndinfo/archive/2010/07/29/2713835.html

總結

以上是生活随笔為你收集整理的Ext 3.0 +ASP.NET2.0 可视化开发介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。