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属性，例如：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  真是不错！