一：簡介

任何包含其它元件的元件的基類，容器最基本的操作包括對其內部元件進行新增，插入和刪除。

最常用的容器類包含Ext.panel.Panel,Ext.window.Window,和Ext.tab.Panel.

可以簡單的建立一個容器：

點選(此處)摺疊或開啟

// 顯式建立一個容器
Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
width: 400,
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// 隱式建立容器透過指定的xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start date'
},{
xtype: 'datefield',
name: 'endDate',
fieldLabel: 'End date'
}]
});

二：Layout

容器類把子元件的渲染任務賦予給了一個layout管理類，必須透過一個layout配置屬性配置到容器當中。

當為容器新增子item或者動態的新增元件時，需要考慮如何組織他們的佈局和大小。預設情況下，容器會按先後順序進行佈局。

某些容器允許動態的新增子元件，但是下面的這些容器卻不允許：Ext.layout.container.Card，Ext.layout.container.Anchor，Ext.layout.container.VBox， Ext.layout.container.HBox，
和Ext.layout.container.Table。

layout列舉值:

1.absolute: 透過座標位置來佈局

點選(此處)摺疊或開啟

Ext.create('Ext.panel.Panel',{
layout:'absolute',
title:'Ext.layout.container.Absolute佈局示例',
frame:false,
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{
frame:true,
height:70,
width:100,
bodyStyle:'background-color:#FFFFFF;padding:15px'//設定皮膚體的背景色
},
items:[{
x:10,//橫座標為距父容器左邊緣10畫素的位置
y:10,//縱座標為距父容器上邊緣10畫素的位置
html:'子皮膚一',
title:'子皮膚一'
},{
x:130,//橫座標為距父容器左邊緣130畫素的位置
y:40,//縱座標為距父容器上邊緣40畫素的位置
html:'子皮膚二',
title:'子皮膚二'
}]
})

2.accorion: 摺疊式佈局，每次只能有一個展開

點選(此處)摺疊或開啟

Ext.create("Ext.panel.Panel", {
title: "Ext.layout.container.Accordion示例",
frame: true,
width: 300,
height: 200,
renderTo: Ext.getBody(),
bodyPadding: 5,
layout: "accordion",
defaults: {
bodyStyle: "background-color:#FFFFFF"
},
items: [{
title: "巢狀皮膚一",
html: "皮膚一"
}, {
title: "巢狀皮膚二",
html: "皮膚二"
}, {
title: "巢狀皮膚三",
html: "皮膚三"
}]
});

3.anchor: 根據容器的相對位置佈局

點選(此處)摺疊或開啟

Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
title: '75% Width and 20% Height',
anchor: '75% 20%'
},
{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},
{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 20%'
}
]
});

4.auto: 未指定layout屬性的容器預設的佈局方式

點選(此處)摺疊或開啟

Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "AutoLayout Panel",
layout: 'auto',
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Top Inner Panel',
width: '75%',
height: 90
},
{
xtype: 'panel',
title: 'Bottom Inner Panel',
width: '75%',
height: 90
}]
});

5.border:這是一個支援多層巢狀皮膚，區域之間的自動形成一個多窗格，面向應用的UI佈局風格內建的展開和摺疊區域。佈局將介面分為上下左右中五個區域，分別用north、south、west、east、center來表示，它的每個子項用region指定元素的位置。

點選(此處)摺疊或開啟

Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
defaults :{
style : {borderStyle:'solid'}
},
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
})

6.box: HBox,VBox的基礎類

7.card:這種佈局管理多個子元件，每個裝到集裝箱，其中只有一個子元件可以在任何給定的時間是可見的。這種佈局的樣式是最常用的嚮導，標籤的實現等

點選(此處)摺疊或開啟

var p = Ext.create('Ext.panel.Panel', {
layout: 'card',
items: [
{ html: 'Card 1' },
{ html: 'Card 2' }
],
renderTo: Ext.getBody()
});
p.getLayout().setActiveItem(0)

8.checkboxgroup: 該種佈局的實現類為Ext.form.CheckboxGroup和Ext.form.RadioGroup

點選(此處)摺疊或開啟

Ext.create('Ext.form.CheckboxGroup', {
id : 'myGroup',
xtype : 'checkboxgroup',
renderTo : Ext.getBody(),
fieldLabel : 'Single Column',
itemCls : 'x-check-group-alt',
columns : 3,
items : [ {
boxLabel : '唱歌',
name : '1'
}, {
boxLabel : '游泳',
name : '2',
checked : true
}, {
boxLabel : '看書',
name : '3'
}, {
boxLabel : '旅遊',
name : '4'
}, {
boxLabel : '遊戲',
name : '5'
}, {
boxLabel : '睡覺',
name : '6'
} ]
})

9.把整個容器看成一列,然後向容器放入子元素

點選(此處)摺疊或開啟

Ext.create('Ext.panel.Panel', {
title: 'Column Layout - Percentage Only',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
columnWidth: 0.25
},{
title: 'Column 2',
columnWidth: 0.55
},{
title: 'Column 3',
columnWidth: 0.20
}],
renderTo: Ext.getBody()
});

10.container: 自定義佈局的基礎類

11.fit:Fit Layout 是很常用的一種佈局，在Fit佈局中，子元素將自動填滿整個父容器。
如果在Fit 佈局中放置了多個元件，則只會顯示第一個子元素。典型的案例就是當客戶要求一個window或panel中放置一個GRID元件，grid元件的大小會隨著父容器的大小改變而改變。

點選(此處)摺疊或開啟

Ext.create('Ext.panel.Panel', {
title: 'Fit Layout',
width: 300,
height: 150,
layout:'fit',
items: {
title: 'Inner Panel',
html: 'This is the inner panel content',
bodyPadding: 20,
border: false
},
renderTo: Ext.getBody()
});

12.form: 表單佈局

點選(此處)摺疊或開啟

Ext.create('Ext.Panel', {
width : 500,
height : 300,
title : "FormLayout Panel",
layout : 'form',
renderTo : Ext.getBody(),
bodyPadding : 5,
defaultType : 'textfield',
items : [ {
fieldLabel : 'First Name',
name : 'first',
allowBlank : false
}, {
fieldLabel : 'Last Name',
name : 'last'
}, {
fieldLabel : 'Company',
name : 'company'
}, {
fieldLabel : 'Email',
name : 'email',
vtype : 'email'
}, {
fieldLabel : 'DOB',
name : 'dob',
xtype : 'datefield'
}, {
fieldLabel : 'Age',
name : 'age',
xtype : 'numberfield',
minValue : 0,
maxValue : 100
}, {
xtype : 'timefield',
fieldLabel : 'Time',
name : 'time',
minValue : '8:00am',
maxValue : '6:00pm'
} ],
renderTo : Ext.getBody()
});

13.hbox:橫向排列跨越容器專案的佈局。這種佈局劃分可選包含數字柔性配置的子項之間的可用的水平空間

點選(此處)摺疊或開啟

Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
align: 'stretch'
},
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Inner Panel One',
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
flex: 1
},{
xtype: 'panel',
title: 'Inner Panel Three',
flex: 1
}],
renderTo: btn10
});

14.table:Table Layout 將內容繪製在table標籤中，table的列數可以指定，還可以透過設定rowSpan和colSpan來建立複雜的佈局

點選(此處)摺疊或開啟

Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 300,
height: 150,
layout: {
type: 'table',
columns: 3
},
defaults: {
bodyStyle: 'padding:20px;',
borderStyle:'solid'
},
items: [{
html: 'Cell A content',
rowspan: 2
},{
html: 'Cell B content',
colspan: 2
},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
}],
renderTo: Ext.getBody()
});

15.vbox:以垂直的方式組織所有子元素。它的子元素可以透過align屬性來設定對齊方式，vbox的對齊方式有：
left : 左對齊，預設對其方式
center : 中間對齊
right : 右對齊
stretch : 以父容器的寬度拉伸對齊
stretchmax : 以所有子元素中的最大寬度拉伸對齊

點選(此處)摺疊或開啟

Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "VBoxLayout Panel",
layout: {
type: 'vbox',
align: 'center'
},
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Inner Panel One',
width: 250,
flex: 2
},
{
xtype: 'panel',
title: 'Inner Panel Two',
width: 250,
flex: 4
},
{
xtype: 'panel',
title: 'Inner Panel Three',
width: '50%',
flex: 4
}],
renderTo: btn9
});

三：Config

1.activeItem:String/Number(子元件id 或者是子元件所在容器的索引)

設定該屬性的目的是設定那個子元件在最初顯示的容器的佈局上渲染. 如：activeItem: 'itemId-1' or activeItem: 0 (容器中的第一個子元件).

適用於一次只能顯示一個item的佈局樣式，如Ext.layout.container.Card 或Ext.layout.container.Fit

2.anchorSize

錨點的大小

3.autoDestory:Boolean

預設為true,表示自動銷燬容器內的所有子元件

4.defaults

對所有透過add或insert新增的item設定統一的屬性。

預設屬性將會應用到所有的子元件上，但是不會覆蓋子元件本身已經有的屬性。

如：
用法:
defaults: { // defaults 將會應用所有的子元件上,而不是父容器
autoScroll: true
},
items: [
// panel1 已經存在 autoScroll: false 所以 defaults將不會應用
{
xtype: 'panel',
id: 'panel1',
autoScroll: false
},
// panel2 將會 autoScroll: true
new Ext.panel.Panel({
id: 'panel2'
})
]

5.items

單個元件,或者是以陣列形式定義的子元件集合將會自動新增到容器中去

如果開發者沒有配置layout屬性，預設是按順序將子元件渲染到在容器中，

不考慮子元件的大小和定位。

如果子元件是指定的,它的實際元件的型別將根據xtype選項進行例項化. 每個元件都有各自的xtype.

如果沒有指定 xtype, 那麼將會使用 defaultType，預設是panel.

不要定義contentEl 或者 html作為子元件

Ext.js4.2.1 Ext.container.Container

相關文章