Ext Designer 總算出來了！！！基于Web的應(yīng)用開發(fā)終于可以可視化開發(fā)了，而且可以幾乎不敲1行代碼。

?

準(zhǔn)備工具：

?? （1）Ext Designer 1.0.2

?? （2）Visual Studio 2005

?

?

第一步：準(zhǔn)備好JSON數(shù)據(jù)。

??? 這里我們采用ASP.NET生成JSON數(shù)據(jù)。

?代碼如下，文件名取為： 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

? 在可視化工具的右上方

?

然后依次設(shè)置JsonStore的Name，如圖：

?

這里的字段名稱要與JSON數(shù)據(jù)源匹配。

?

????? 設(shè)置JsonStore 連接到asp.net：

?????? 設(shè)置url屬性，例如：http://192.168.192.65/Test/Gwxxll_JSON/json.aspx

????? 并且勾選 autoload，自動加載數(shù)據(jù)

?

??

?

? ?注意： 此處一共有3個屬性很關(guān)鍵。

???? root

???? url

???? totalProperty

（3）設(shè)置Grid表格控件與JsonStroe的映射關(guān)系

??? 首先設(shè)置Grid與JsonStore，點擊Grid 后，在GridPane的旁邊會有個齒輪的圖標(biāo)

點擊后，會出現(xiàn)剛剛創(chuàng)建的MyStore，選中后即可。

?

然后綁定表格控件的列。

添加4個

列控件到GridPanel里面。然后依次設(shè)置 dataIndex 屬性。

例如：姓名就設(shè)置為name

???????? 電話就設(shè)為TEL

?

設(shè)置完畢后，點擊 預(yù)覽按鈕，即可以看到效果了。

?

?

至此，可視化操作完畢，不費(fèi)吹灰之力就搞定！

?

Ext Designer? 真是不錯！

?

轉(zhuǎn)載于:https://www.cnblogs.com/hgndinfo/archive/2010/07/29/2713835.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。