Extjs学习总结之18布局与表单初始化

布局就是说你的这些组件按照怎么个布局方式排列的问题，我们看看extjs的布局管理是如何做的：

layout.js:

Ext.onReady(function(){var form = new Ext.form.FormPanel({title:"灵活布局的表单",width:650,autoHeight:true,frame:true,renderTo:"a", //<div id="a"></div>layout:"form",//整个大的表单是form布局labelWidth:65,labelAlign:"right",items:[{//行1layout:"column",//从左到右的布局items:[{columnWidth:.3,//该列有整行中所占百分比layout:"form",//从上往下的布局items:[{xtype:"textfield",fieldLabel:"姓",width:120}]},{columnWidth:.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"名",width:120}]},{columnWidth:.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"英文名",width:120}]}]},{//行2layout:"column",items:[{columnWidth:5,layout:"form",items:[{xtype:"textfield",fieldLabel:"座右铭1",width:220}]},{columnWidth:5,layout:"form",items:[{xtype:"textfield",fieldLabel:"座右铭2",width:220}]}]},{//行3layout:"form",items:[{xtype:"textfield",fieldLabel:"奖励",width:500},{xtype:"textfield",fieldLabel:"处罚",width:500}]},{//行4layout:"column",items:[{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"电影最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"音乐最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"明星最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"运动最爱",width:50}]}]},{//行5layout:"form",items:[{xtype:"htmleditor",fieldLabel:"获奖文章",enableLists:false,enableSourceEdit:false,height:150}]}],buttonAlign:"center",buttons:[{text:"提交"},{text:"重置"}]});});

 

效果图：

 

所谓表单初始化，就是还是和后台servlet的一个交互，只不过这里我们把他的数据本地化了，当然也可以从数据库中取。看看吧。

 

forminit.js:

Ext.onReady(function(){//创建JSON对象 用来定义记录机构，并建立和json对象的映射关系var reader = new Ext.data.JsonReader({},[{name:"userName",type:"string",mapping:"userName"},{name:"password",type:"string",mapping:"password"},{name:"birthday",type:"string",mapping:"birthday"},{name:"sexGroup",type:"string",mapping:"sexGroup"}]);/* * FormPanel通常支持两种初始化表单组件的方法： * * 本次初始化：创建二维数据或者JSON对象，使用Ext.form.BasicForm的setValues()方法填充 * * 远程初始化：从远程服务器获取JSON对象数组，通过Ext.form.FormPanel的load方法填充 */var form = new Ext.form.FormPanel({title:"表单初始化-用户注册",width:300,autoHeight:true,frame:true,renderTo:"a",labelWidth:65,labelAlign:"right",defaultType:"textfield",items:[{name:"userName",fieldLabel:"用户名",width:200},{name:"password",fieldLabel:"密码",inputType:"password",width:200},{name:"birthday",fieldLabel:"出生日期",xtype:"datefield",format:"Y-m-d",width:150},{name:"sexGroup",fieldLabel:"性别",xtype:"radiogroup",//xtype:"ux-radiogroup",//horizontal:true,//水平放置//radios:[{//name:"sex",//boxLabel:"男",//value:"男"//},{//name:"sex",//boxLabel:"女",//value:"女"//}]//有bugwidth:100,items:[{name:"sex",xtype:"radio",boxLabel:"男",inputValue:"男"},{name:"sex",xtype:"radio",boxLabel:"女",inputValue:"女"}]}],buttons:[{text:"提交"},{text:"本地读取",handler:function(){var json = {userName:"吕鹏",password:"admin",birthday:"1990-03-10",sex:"男"//sexGroup:"男"};form.getForm().setValues(json);}},{text:"远程读取",handler:function(){//reader是赋给了form.getForm().reader不是给form//load方法负责通过ajax从指定的web组件获取数据，然后自动填充form.getForm().reader = reader;form.load({url:"../../../initValuesServlet"});}}]});});

效果图：