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
(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 真是不错!