布局就是说你的这些组件按照怎么个布局方式排列的问题,我们看看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:[{//行1
layout:"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
}]
}]
},{//行2
layout:"column",
items:[{
columnWidth:5,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"座右铭1",
width:220
}]
},{
columnWidth:5,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"座右铭2",
width:220
}]
}]
},{//行3
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"奖励",
width:500
},{
xtype:"textfield",
fieldLabel:"处罚",
width:500
}]
},{//行4
layout:"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
}]
}]
},{//行5
layout:"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:"女"
// }]
//有bug
width: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"});
}
}]
});
});
效果图: