说明: 本教程在我推荐的ajax/ext目录规范环境下开发,如环境不同,请自行修改相关路径
本项目框架及代码在此下载
1.打开项目
![01.jpg 01.jpg](http://meetrice.cn/upload/121076310007_01_tn.jpg)
2.在根目录下建立demo.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>ExtJs Gui Designer Demo</title>
<!-- The ExtJs base 2.02 -->
<link rel="stylesheet" type="text/css" href="framework/ext-2.0.2/resources/css/ext-all.css" temp_href="framework/ext-2.0.2/resources/css/ext-all.css"/>
<script type="text/javascript" src="framework/ext-2.0.2/adapter/ext/ext-base.js" temp_src="framework/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="framework/ext-2.0.2/ext-all.js" temp_src="framework/ext-2.0.2/ext-all.js"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!-- The Json Panel -->
<script type="text/javascript" src="widget/Ext.ux.JsonPanel.js" temp_src="widget/Ext.ux.JsonPanel.js"></script>
</head>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<body>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
new Ext.Viewport(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items : new Ext.ux.JsonPanel(
{autoLoad:'modules/user.json'}),
layout: 'fit'
}).show();
</script>
</body>
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
注意 其中user.json就是GUIBUILDER中生成的代码.
3.打开GuiBuilder
![02.jpg 02.jpg](http://meetrice.cn/upload/121076335371_02_tn.jpg)
4.设计界面
1).首先双击 FormPanel,或把FormPanel拖进主面板
![03.jpg 03.jpg](http://meetrice.cn/upload/121076356881_03_tn.jpg)
2)接着拖动TextField进入FormPanle,并修改FieldLabel为"用户名",添加"id"属性为"username"
![04.jpg 04.jpg](http://meetrice.cn/upload/121076371914_04_tn.jpg)
3)再插入一个按钮button,添加handle事件
![05.jpg 05.jpg](http://meetrice.cn/upload/121076381440_05_tn.jpg)
4)点击click here to edit,弹出脚本编辑框,在其实输入:
function(){
alert(Ext.get("username").getValue());
}
输入,点击apply
![06.jpg 06.jpg](http://meetrice.cn/upload/121076399306_06_tn.jpg)
5) 点击 copy json,或打开edit json,拷贝其中的代码,将其另存为user.json
6) 打开demo.html
![07.jpg 07.jpg](http://meetrice.cn/upload/121076424773_07_tn.jpg)