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

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

例一：

 

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

Js代码  

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

 

 

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

Js代码  

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

 

 

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

Js代码  

1. Ext.onReady(function() {     
2.     var win = new Ext.Window({     
3.         title: "form Layout",     
4.         height: 150,     
5.         width: 230,     
6.         plain: true,     
7.         bodyStyle: 'padding:15px',     
8.         items:{     
9.             xtype: "form",     
10.             labelWidth: 30,     
11.             defaultType: "textfield",     
12.             frame:true,     
13.             items:[     
14.                 {     
15.                     fieldLabel:"姓名",     
16.                     name:"username",     
17.                     allowBlank:false //必填项(非空)    
18.                 },     
19.                 {     
20.                     fieldLabel:"呢称",     
21.                     name:"nickname"     
22.                 },     
23.                 {     
24.                     fieldLabel: "生日",     
25.                     xtype:'datefield',     
26.                     name: "birthday",     
27.                     width:127    
28.                 }     
29.             ]     
30.         }     
31.     });     
32.     win.show();     
33. });  

 

 

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

例一：

Js代码  

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

 

 

 

Js代码  

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

 

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