导航：首页 > 开发技术 >

Ext.js4.2.1中Ext.container.Container怎么用

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，小编给大家分享一下Ext.js4.2.1中Ext.container.Container怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们

千家信息网最后更新 2026年11月03日Ext.js4.2.1中Ext.container.Container怎么用

小编给大家分享一下Ext.js4.2.1中Ext.container.Container怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一：简介

任何包含其它组件的组件的基类，容器最基本的操作包括对其内部组件进行添加，插入和删除。

最常用的容器类包含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作为子组件