说明: 本教程在我推荐的ajax/ext目录规范环境下开发,如环境不同,请自行修改相关路径
1.打开项目
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 >
<!-- The Json Panel -->
< script type ="text/javascript" src ="widget/Ext.ux.JsonPanel.js" temp_src ="widget/Ext.ux.JsonPanel.js" ></ script >
</ head >
< body >
< script >
new Ext.Viewport({
items : new Ext.ux.JsonPanel({autoLoad:'modules/user.json'}),
layout: 'fit'
}).show();
</ script >
</ body >
</ 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 >
<!-- The Json Panel -->
< script type ="text/javascript" src ="widget/Ext.ux.JsonPanel.js" temp_src ="widget/Ext.ux.JsonPanel.js" ></ script >
</ head >
< body >
< script >
new Ext.Viewport({
items : new Ext.ux.JsonPanel({autoLoad:'modules/user.json'}),
layout: 'fit'
}).show();
</ script >
</ body >
</ html >
注意 其中user.json就是GUIBUILDER中生成的代码.
3.打开GuiBuilder
4.设计界面
1).首先双击 FormPanel,或把FormPanel拖进主面板
2)接着拖动TextField进入FormPanle,并修改FieldLabel为"用户名",添加"id"属性为"username"
3)再插入一个按钮button,添加handle事件
4)点击click here to edit,弹出脚本编辑框,在其实输入:
function(){
alert(Ext.get("username").getValue());
}
5) 点击 copy json,或打开edit json,拷贝其中的代码,将其另存为user.json
6) 打开demo.html