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

第二步:用Ext Designer 制作界面

界面布局如下:

(1)首先放置FormPanel,然后放置GridPane

Ext 3.0 +ASP.NET2.0 可视化开发介绍

(2)添加一个JSONStore

在可视化工具的右上方

Ext 3.0 +ASP.NET2.0 可视化开发介绍

然后依次设置JsonStore的Name,如图:

Ext 3.0 +ASP.NET2.0 可视化开发介绍

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

设置JsonStore 连接到asp.net:

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

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

Ext 3.0 +ASP.NET2.0 可视化开发介绍

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

root

url

totalProperty

(3)设置Grid表格控件与JsonStroe的映射关系

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

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

Ext 3.0 +ASP.NET2.0 可视化开发介绍

然后绑定表格控件的列。

Ext 3.0 +ASP.NET2.0 可视化开发介绍

添加4个

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

例如:姓名就设置为name

电话就设为TEL

Ext 3.0 +ASP.NET2.0 可视化开发介绍

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

Ext 3.0 +ASP.NET2.0 可视化开发介绍

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

Ext Designer 真是不错!

你可能感兴趣的:(asp.net)