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:[{//行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"});
			}
		}]
		
	});
});

效果图：