ExtJS layout的9种样式详解(三)

七、fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

例一：

 

 例二： 如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：

Ext.onReady(function(){
new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素1",html:"这是子元素1中的内容"},
			{title:"子元素2",html:"这是子元素2中的内容"}
		]
	});
});

 

 

例三：如果不使用布局Fit，代码如下：

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:500,
		height:200,
		items:[{title:"子元素1",html:"这是子元素1中的内容"},
				{title:"子元素2",html:"这是子元素2中的内容"}
		]
	});
});

 

 

八、form 是一种专门用于管理表单中输入字段的布局

Ext.onReady(function() {   
	var win = new Ext.Window({   
		title: "form Layout",   
		height: 150,   
		width: 230,   
		plain: true,   
		bodyStyle: 'padding:15px',   
		items:{   
			xtype: "form",   
			labelWidth: 30,   
			defaultType: "textfield",   
			frame:true,   
			items:[   
				{   
					fieldLabel:"姓名",   
					name:"username",   
					allowBlank:false //必填项(非空)  
				},   
				{   
					fieldLabel:"呢称",   
					name:"nickname"   
				},   
				{   
					fieldLabel: "生日",   
					xtype:'datefield',   
					name: "birthday",   
					width:127  
				}   
			]   
		}   
	});   
	win.show();   
});

 

 

九、table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

例一：

Ext.onReady(function(){   
	var panel=new Ext.Panel( {   
       renderTo:'hello',   
       title:'容器组件',   
       layout:'table',          
       width:500,   
       height:200,   
       layoutConfig:{columns:3},//将父容器分成3列   
       items:[   
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},   
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},   
        {title:'元素3',html:'sdfsdfsdf'},   
        {title:'元素4',html:''}   
       ]   
	});   
});  

 

 

 

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素",html:"这是子元素中的内容"}]
	});
});

 

上面的代码指定父容器使用Fit布局，因此子将自动填满整个父容器。输出的图形如下：012