1.Layouts
1)Ext.layout.container.Border
layout : 'border' 表示我们使用了Border布局，这种布局方式称为边界布局，它将页面分隔成为:west,east,south,north,center这五个部分，我们在items里面使用region参数为它组织定义具体的位置。
north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大了，center区域就变小了。
参数 split:true 可以拖动除了center四个区域的大小。
参数 collapsible:true 激活折叠功能，前面title必须设置，因为折叠按钮是出现标题部分
注意：center 区域是必须使用的，而且center 区域不允许折叠。
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
layout:
'border',
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:
'east'
,
// center region is required, no width/height specified
xtype:
'panel'
,
layout:
'fit'
,
margins:
'5 5 0 0'
}],
renderTo: Ext.getBody()
});
2)Ext.layout.container.Fit
layout:'fit' 表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。
注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。
Ext.define(
'ParentWindow'
,{
extend :
'Ext.window.Window'
,
title :
'ParentWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit',
items : {
xtype :
'gridpanel'
,
store: store,
stateful:
true
,
layout :
'fit'
,
columns: [
{
text :
'Company'
,
flex : 1,
sortable :
false
,
dataIndex:
'company'
},
{
text :
'Price'
,
width : 75,
sortable :
true
,
renderer :
'usMoney'
,
dataIndex:
'price'
},
{
text :
'Change'
,
width : 75,
sortable :
true
,
dataIndex:
'change'
},
{
text :
'% Change'
,
width : 75,
sortable :
true
,
dataIndex:
'pctChange'
},
{
text :
'Last Updated'
,
width : 85,
sortable :
true
,
renderer : Ext.util.Format.dateRenderer(
'm/d/Y'
),
dataIndex:
'lastChange'
}]
}
});
3）Ext.layout.container.Accordion
layout : '
accordion' 代表使用了accordion布局方式。
var
accrodion = Ext.create(
'Ext.panel.Panel'
, {
layout:
'accordion',
defaults: {
bodyStyle:
'padding:15px'
},
layoutConfig: {
titleCollapse:
true
,
animate:
true
,
activeOnTop:
false
},
items: [{
title:
'Panel 1'
,
html:
'Panel content!'
},{
title:
'Panel 2'
,
html:
'Panel content!'
},{
title:
'Panel 3'
,
html:
'Panel content!'
}],
});
4)Ext.layout.container.Card
layout : 'card' Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。
<script type="text/javascript">
var
navigate =
function
(panel,direction){
var
layout = panel.getLayout();
layout[direction]();
Ext.getCmp(
'move-prev'
).setDisabled(!layout.getPrev());
Ext.getCmp(
'move-next'
).setDisabled(!layout.getNext());
}
var
cardPanel = Ext.create(
'Ext.panel.Panel'
,{
layout:
'card',
activeItem: 0,
// make sure the active item is set on the container config!
bodyStyle:
'padding:15px'
,
defaults: {
// applied to each contained panel
border:
false
},
bbar : [{
id:
'move-prev'
,
text :
'上一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'prev'
);
}
}
},{
id:
'move-next'
,
text :
'下一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'next'
);
}
}
}],
items : [
{
id :
'card0'
,
html :
'<h1>Welcome to card0!</h1>第一章：好好学习'
},{
id :
'card1'
,
html :
'<h1>Welcome to card1!</h1>第二章：天天向上'
},{
id :
'card2'
,
html :
'<h1>Welcome to card2!</h1>第三章：good good study'
},{
id :
'card3'
,
html :
'<h1>Welcome to card3!</h1>第四章：天天'
},{
id :
'card4'
,
html :
'<h1>Welcome to card4!</h1>第五章：顶顶顶'
}
]
});
Ext.onReady(
function
(){
Ext.create(
'Ext.window.Window'
,{
title :
'CardLayoutWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit'
,
items : cardPanel
}).show();
});
</
script
>
5）Ext.layout.container.Anchor
layout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。
anchor: '75% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。
anchor:'-300 -200' ，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。
<
script
type
=
"text/javascript"
>
Ext.onReady(
function
(){
Ext.create(
'Ext.Panel'
, {
width: 500,
height: 400,
title:
"AnchorLayout Panel"
,
layout:
'anchor',
renderTo: Ext.getBody(),
items: [{
xtype:
'panel'
,
title:
'75%宽度 20%高度'
,
anchor:
'75% 20%'
},{
xtype:
'panel'
,
title:
'Offset -300 Width & -200 Height'
,
anchor:
'-300 -200'
},{
xtype:
'panel'
,
title:
'Mixed Offset and Percent'
,
anchor:
'-250 20%'
}]
});
});
</
script
>
6)Ext.layout.container.Absolute
layout:'absolute'。我们可以对每一个控件的位置进行控制。
x:设置x坐标；y:设置y坐标
var
alayout = Ext.create(
'Ext.form.Panel'
, {
width: 300,
height: 275,
layout:
'absolute',
defaultType:
'textfield'
,
items: [{
x: 10,
y: 10,
xtype:
'label'
,
text:
'Send To:'
},{
x: 80,
y: 10,
name:
'to'
,
anchor:
'90%'
// anchor width by percentage
},{
x: 10,
y: 40,
xtype:
'label'
,
text:
'Subject:'
},{
x: 80,
y: 40,
name:
'subject'
,
anchor:
'90%'
// anchor width by percentage
},{
x:0,
y: 80,
xtype:
'textareafield'
,
name:
'msg'
,
anchor:
'100% 100%'
// anchor width and height
}]
});
7)Ext.layout.container.Column
layout:'column
'：表格布局。
注意items 中
columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。
var
columnLayout = Ext.create(
'Ext.panel.Panel'
, {
width: 350,
height: 250,
layout:
'column',
items: [{
title:
'表格Layout 1'
,
columnWidth: .25
},{
title:
'表格Layout 2'
,
columnWidth: .55
},{
title:
'表格Layout 3'
,
columnWidth: .20
}],
renderTo: Ext.getBody()
});
8)Ext.layout.container.Table
layout : 'table' 表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的<table></table>标签。
var
tableLayout = Ext.create(
'Ext.panel.Panel'
,{
width: 300,
height: 150,
layout : {
type : 'table',
columns : 3
},
defaults: {
// applied to each contained panel
bodyStyle:
'padding:20px'
},
items: [{
html:
'A table'
,
rowspan: 2
},{
html:
'B table'
,
colspan: 2
},{
html:
'C table'
,
cellCls:
'highlight'
},{
html:
'D table'
}]
});
9)Ext.layout.container.VBox 垂直布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边
2、center：组件在容器中间
3、end：组件在容器的下边
10)Ext.layout.container.HBox 水平布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边
2、center：组件在容器中间
3、end：组件在容器的右边
2)Ext.layout.container.Fit
layout:'fit' 表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。
注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。
Ext.define(
'ParentWindow'
,{
extend :
'Ext.window.Window'
,
title :
'ParentWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit',
items : {
xtype :
'gridpanel'
,
store: store,
stateful:
true
,
layout :
'fit'
,
columns: [
{
text :
'Company'
,
flex : 1,
sortable :
false
,
dataIndex:
'company'
},
{
text :
'Price'
,
width : 75,
sortable :
true
,
renderer :
'usMoney'
,
dataIndex:
'price'
},
{
text :
'Change'
,
width : 75,
sortable :
true
,
dataIndex:
'change'
},
{
text :
'% Change'
,
width : 75,
sortable :
true
,
dataIndex:
'pctChange'
},
{
text :
'Last Updated'
,
width : 85,
sortable :
true
,
renderer : Ext.util.Format.dateRenderer(
'm/d/Y'
),
dataIndex:
'lastChange'
}]
}
});
3）Ext.layout.container.Accordion
layout : '
accordion' 代表使用了accordion布局方式。
var
accrodion = Ext.create(
'Ext.panel.Panel'
, {
layout:
'accordion',
defaults: {
bodyStyle:
'padding:15px'
},
layoutConfig: {
titleCollapse:
true
,
animate:
true
,
activeOnTop:
false
},
items: [{
title:
'Panel 1'
,
html:
'Panel content!'
},{
title:
'Panel 2'
,
html:
'Panel content!'
},{
title:
'Panel 3'
,
html:
'Panel content!'
}],
});
4)Ext.layout.container.Card
layout : 'card' Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。
<script type="text/javascript">
var
navigate =
function
(panel,direction){
var
layout = panel.getLayout();
layout[direction]();
Ext.getCmp(
'move-prev'
).setDisabled(!layout.getPrev());
Ext.getCmp(
'move-next'
).setDisabled(!layout.getNext());
}
var
cardPanel = Ext.create(
'Ext.panel.Panel'
,{
layout:
'card',
activeItem: 0,
// make sure the active item is set on the container config!
bodyStyle:
'padding:15px'
,
defaults: {
// applied to each contained panel
border:
false
},
bbar : [{
id:
'move-prev'
,
text :
'上一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'prev'
);
}
}
},{
id:
'move-next'
,
text :
'下一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'next'
);
}
}
}],
items : [
{
id :
'card0'
,
html :
'<h1>Welcome to card0!</h1>第一章：好好学习'
},{
id :
'card1'
,
html :
'<h1>Welcome to card1!</h1>第二章：天天向上'
},{
id :
'card2'
,
html :
'<h1>Welcome to card2!</h1>第三章：good good study'
},{
id :
'card3'
,
html :
'<h1>Welcome to card3!</h1>第四章：天天'
},{
id :
'card4'
,
html :
'<h1>Welcome to card4!</h1>第五章：顶顶顶'
}
]
});
Ext.onReady(
function
(){
Ext.create(
'Ext.window.Window'
,{
title :
'CardLayoutWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit'
,
items : cardPanel
}).show();
});
</
script
>
5）Ext.layout.container.Anchor
layout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。
anchor: '75% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。
anchor:'-300 -200' ，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。
<
script
type
=
"text/javascript"
>
Ext.onReady(
function
(){
Ext.create(
'Ext.Panel'
, {
width: 500,
height: 400,
title:
"AnchorLayout Panel"
,
layout:
'anchor',
renderTo: Ext.getBody(),
items: [{
xtype:
'panel'
,
title:
'75%宽度 20%高度'
,
anchor:
'75% 20%'
},{
xtype:
'panel'
,
title:
'Offset -300 Width & -200 Height'
,
anchor:
'-300 -200'
},{
xtype:
'panel'
,
title:
'Mixed Offset and Percent'
,
anchor:
'-250 20%'
}]
});
});
</
script
>
6)Ext.layout.container.Absolute
layout:'absolute'。我们可以对每一个控件的位置进行控制。
x:设置x坐标；y:设置y坐标
var
alayout = Ext.create(
'Ext.form.Panel'
, {
width: 300,
height: 275,
layout:
'absolute',
defaultType:
'textfield'
,
items: [{
x: 10,
y: 10,
xtype:
'label'
,
text:
'Send To:'
},{
x: 80,
y: 10,
name:
'to'
,
anchor:
'90%'
// anchor width by percentage
},{
x: 10,
y: 40,
xtype:
'label'
,
text:
'Subject:'
},{
x: 80,
y: 40,
name:
'subject'
,
anchor:
'90%'
// anchor width by percentage
},{
x:0,
y: 80,
xtype:
'textareafield'
,
name:
'msg'
,
anchor:
'100% 100%'
// anchor width and height
}]
});
7)Ext.layout.container.Column
layout:'column
'：表格布局。
注意items 中
columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。
var
columnLayout = Ext.create(
'Ext.panel.Panel'
, {
width: 350,
height: 250,
layout:
'column',
items: [{
title:
'表格Layout 1'
,
columnWidth: .25
},{
title:
'表格Layout 2'
,
columnWidth: .55
},{
title:
'表格Layout 3'
,
columnWidth: .20
}],
renderTo: Ext.getBody()
});
8)Ext.layout.container.Table
layout : 'table' 表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的<table></table>标签。
var
tableLayout = Ext.create(
'Ext.panel.Panel'
,{
width: 300,
height: 150,
layout : {
type : 'table',
columns : 3
},
defaults: {
// applied to each contained panel
bodyStyle:
'padding:20px'
},
items: [{
html:
'A table'
,
rowspan: 2
},{
html:
'B table'
,
colspan: 2
},{
html:
'C table'
,
cellCls:
'highlight'
},{
html:
'D table'
}]
});
9)Ext.layout.container.VBox 垂直布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边
2、center：组件在容器中间
3、end：组件在容器的下边
10)Ext.layout.container.HBox 水平布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边
2、center：组件在容器中间
3、end：组件在容器的右边1.Layouts
1)Ext.layout.container.Borderlayout : 'border' 表示我们使用了Border布局，这种布局方式称为边界布局，它将页面分隔成为:west,east,south,north,center这五个部分，我们在items里面使用region参数为它组织定义具体的位置。north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大了，center区域就变小了。参数 split:true 可以拖动除了center四个区域的大小。参数 collapsible:true 激活折叠功能，前面title必须设置，因为折叠按钮是出现标题部分注意：center 区域是必须使用的，而且center 区域不允许折叠。Ext.create('Ext.panel.Panel', {width: 500,height: 400,layout: 'border',items: [{title: 'South Region is resizable' ,region: 'south' , // position for regionxtype: 'panel' ,height: 100,split: true , // enable resizingmargins: '0 5 5 5'},{// xtype: 'panel' implied by defaulttitle: 'West Region is collapsible' ,region: 'west' ,xtype: 'panel' ,margins: '5 0 0 5' ,width: 200,collapsible: true , // make collapsibleid: 'west-region-container' ,layout: 'fit'},{title: 'Center Region' ,region: 'east' , // center region is required, no width/height specifiedxtype: 'panel' ,layout: 'fit' ,margins: '5 5 0 0'}],renderTo: Ext.getBody()});
2)Ext.layout.container.Fitlayout:'fit' 表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。Ext.define( 'ParentWindow' ,{extend : 'Ext.window.Window' ,title : 'ParentWindow' ,width : '300px' ,height : '200px' ,layout : 'fit',items : {xtype : 'gridpanel' ,store: store,stateful: true ,layout : 'fit' ,columns: [{text : 'Company' ,flex : 1,sortable : false ,dataIndex: 'company'},{text : 'Price' ,width : 75,sortable : true ,renderer : 'usMoney' ,dataIndex: 'price'},{text : 'Change' ,width : 75,sortable : true ,dataIndex: 'change'},{text : '% Change' ,width : 75,sortable : true ,dataIndex: 'pctChange'},{text : 'Last Updated' ,width : 85,sortable : true ,renderer : Ext.util.Format.dateRenderer( 'm/d/Y' ),dataIndex: 'lastChange'}]}});
3）Ext.layout.container.Accordionlayout : ' accordion' 代表使用了accordion布局方式。var accrodion = Ext.create( 'Ext.panel.Panel' , {layout: 'accordion',defaults: {bodyStyle: 'padding:15px'},layoutConfig: {titleCollapse: true ,animate: true ,activeOnTop: false},items: [{title: 'Panel 1' ,html: 'Panel content!'},{title: 'Panel 2' ,html: 'Panel content!'},{title: 'Panel 3' ,html: 'Panel content!'}],
});
4)Ext.layout.container.Cardlayout : 'card' Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。<script type="text/javascript">var navigate = function (panel,direction){var layout = panel.getLayout();layout[direction]();Ext.getCmp( 'move-prev' ).setDisabled(!layout.getPrev());Ext.getCmp( 'move-next' ).setDisabled(!layout.getNext());}var cardPanel = Ext.create( 'Ext.panel.Panel' ,{layout: 'card',activeItem: 0, // make sure the active item is set on the container config!bodyStyle: 'padding:15px' ,defaults: {// applied to each contained panelborder: false},bbar : [{id: 'move-prev' ,text : '上一章' ,xtype : 'button' ,listeners : {'click' : function (btn){navigate(btn.up( 'panel' ), 'prev' );}}},{id: 'move-next' ,text : '下一章' ,xtype : 'button' ,listeners : {'click' : function (btn){navigate(btn.up( 'panel' ), 'next' );}}}],items : [{id : 'card0' ,html : '<h1>Welcome to card0!</h1>第一章：好好学习'},{id : 'card1' ,html : '<h1>Welcome to card1!</h1>第二章：天天向上'},{id : 'card2' ,html : '<h1>Welcome to card2!</h1>第三章：good good study'},{id : 'card3' ,html : '<h1>Welcome to card3!</h1>第四章：天天'},{id : 'card4' ,html : '<h1>Welcome to card4!</h1>第五章：顶顶顶'}]});Ext.onReady( function (){Ext.create( 'Ext.window.Window' ,{title : 'CardLayoutWindow' ,width : '300px' ,height : '200px' ,layout : 'fit' ,items : cardPanel}).show();});</ script >
5）Ext.layout.container.Anchorlayout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。anchor: '75% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。anchor:'-300 -200' ，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。< script type = "text/javascript" >Ext.onReady( function (){Ext.create( 'Ext.Panel' , {width: 500,height: 400,title: "AnchorLayout Panel" ,layout: 'anchor',renderTo: Ext.getBody(),items: [{xtype: 'panel' ,title: '75%宽度 20%高度' ,anchor: '75% 20%'},{xtype: 'panel' ,title: 'Offset -300 Width & -200 Height' ,anchor: '-300 -200'},{xtype: 'panel' ,title: 'Mixed Offset and Percent' ,anchor: '-250 20%'}]});});</ script >
6)Ext.layout.container.Absolutelayout:'absolute'。我们可以对每一个控件的位置进行控制。x:设置x坐标；y:设置y坐标var alayout = Ext.create( 'Ext.form.Panel' , {width: 300,height: 275,layout: 'absolute',defaultType: 'textfield' ,items: [{x: 10,y: 10,xtype: 'label' ,text: 'Send To:'},{x: 80,y: 10,name: 'to' ,anchor: '90%' // anchor width by percentage},{x: 10,y: 40,xtype: 'label' ,text: 'Subject:'},{x: 80,y: 40,name: 'subject' ,anchor: '90%' // anchor width by percentage},{x:0,y: 80,xtype: 'textareafield' ,name: 'msg' ,anchor: '100% 100%' // anchor width and height}]});
7)Ext.layout.container.Columnlayout:'column '：表格布局。注意items 中 columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。var columnLayout = Ext.create( 'Ext.panel.Panel' , {width: 350,height: 250,layout: 'column',items: [{title: '表格Layout 1' ,columnWidth: .25},{title: '表格Layout 2' ,columnWidth: .55},{title: '表格Layout 3' ,columnWidth: .20}],renderTo: Ext.getBody()});
8)Ext.layout.container.Tablelayout : 'table' 表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的<table></table>标签。var tableLayout = Ext.create( 'Ext.panel.Panel' ,{width: 300,height: 150,layout : {type : 'table',columns : 3},defaults: {// applied to each contained panelbodyStyle: 'padding:20px'},items: [{html: 'A table' ,rowspan: 2},{html: 'B table' ,colspan: 2},{html: 'C table' ,cellCls: 'highlight'},{html: 'D table'}]
});
9)Ext.layout.container.VBox 垂直布局a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边
2、center：组件在容器中间
3、end：组件在容器的下边
10)Ext.layout.container.HBox 水平布局a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边
2、center：组件在容器中间
3、end：组件在容器的右边
2)Ext.layout.container.Fitlayout:'fit' 表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。Ext.define( 'ParentWindow' ,{extend : 'Ext.window.Window' ,title : 'ParentWindow' ,width : '300px' ,height : '200px' ,layout : 'fit',items : {xtype : 'gridpanel' ,store: store,stateful: true ,layout : 'fit' ,columns: [{text : 'Company' ,flex : 1,sortable : false ,dataIndex: 'company'},{text : 'Price' ,width : 75,sortable : true ,renderer : 'usMoney' ,dataIndex: 'price'},{text : 'Change' ,width : 75,sortable : true ,dataIndex: 'change'},{text : '% Change' ,width : 75,sortable : true ,dataIndex: 'pctChange'},{text : 'Last Updated' ,width : 85,sortable : true ,renderer : Ext.util.Format.dateRenderer( 'm/d/Y' ),dataIndex: 'lastChange'}]}});
![]()
3）Ext.layout.container.Accordionlayout : ' accordion' 代表使用了accordion布局方式。var accrodion = Ext.create( 'Ext.panel.Panel' , {layout: 'accordion',defaults: {bodyStyle: 'padding:15px'},layoutConfig: {titleCollapse: true ,animate: true ,activeOnTop: false},items: [{title: 'Panel 1' ,html: 'Panel content!'},{title: 'Panel 2' ,html: 'Panel content!'},{title: 'Panel 3' ,html: 'Panel content!'}],
});![]()
4)Ext.layout.container.Cardlayout : 'card' Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。<script type="text/javascript">var navigate = function (panel,direction){var layout = panel.getLayout();layout[direction]();Ext.getCmp( 'move-prev' ).setDisabled(!layout.getPrev());Ext.getCmp( 'move-next' ).setDisabled(!layout.getNext());}var cardPanel = Ext.create( 'Ext.panel.Panel' ,{layout: 'card',activeItem: 0, // make sure the active item is set on the container config!bodyStyle: 'padding:15px' ,defaults: {// applied to each contained panelborder: false},bbar : [{id: 'move-prev' ,text : '上一章' ,xtype : 'button' ,listeners : {'click' : function (btn){navigate(btn.up( 'panel' ), 'prev' );}}},{id: 'move-next' ,text : '下一章' ,xtype : 'button' ,listeners : {'click' : function (btn){navigate(btn.up( 'panel' ), 'next' );}}}],items : [{id : 'card0' ,html : '<h1>Welcome to card0!</h1>第一章：好好学习'},{id : 'card1' ,html : '<h1>Welcome to card1!</h1>第二章：天天向上'},{id : 'card2' ,html : '<h1>Welcome to card2!</h1>第三章：good good study'},{id : 'card3' ,html : '<h1>Welcome to card3!</h1>第四章：天天'},{id : 'card4' ,html : '<h1>Welcome to card4!</h1>第五章：顶顶顶'}]});Ext.onReady( function (){Ext.create( 'Ext.window.Window' ,{title : 'CardLayoutWindow' ,width : '300px' ,height : '200px' ,layout : 'fit' ,items : cardPanel}).show();});</ script >![]()
5）Ext.layout.container.Anchorlayout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。anchor: '75% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。anchor:'-300 -200' ，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。< script type = "text/javascript" >Ext.onReady( function (){Ext.create( 'Ext.Panel' , {width: 500,height: 400,title: "AnchorLayout Panel" ,layout: 'anchor',renderTo: Ext.getBody(),items: [{xtype: 'panel' ,title: '75%宽度 20%高度' ,anchor: '75% 20%'},{xtype: 'panel' ,title: 'Offset -300 Width & -200 Height' ,anchor: '-300 -200'},{xtype: 'panel' ,title: 'Mixed Offset and Percent' ,anchor: '-250 20%'}]});});</ script >
![]()
6)Ext.layout.container.Absolutelayout:'absolute'。我们可以对每一个控件的位置进行控制。x:设置x坐标；y:设置y坐标var alayout = Ext.create( 'Ext.form.Panel' , {width: 300,height: 275,layout: 'absolute',defaultType: 'textfield' ,items: [{x: 10,y: 10,xtype: 'label' ,text: 'Send To:'},{x: 80,y: 10,name: 'to' ,anchor: '90%' // anchor width by percentage},{x: 10,y: 40,xtype: 'label' ,text: 'Subject:'},{x: 80,y: 40,name: 'subject' ,anchor: '90%' // anchor width by percentage},{x:0,y: 80,xtype: 'textareafield' ,name: 'msg' ,anchor: '100% 100%' // anchor width and height}]});![]()
7)Ext.layout.container.Columnlayout:'column '：表格布局。注意items 中 columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。var columnLayout = Ext.create( 'Ext.panel.Panel' , {width: 350,height: 250,layout: 'column',items: [{title: '表格Layout 1' ,columnWidth: .25},{title: '表格Layout 2' ,columnWidth: .55},{title: '表格Layout 3' ,columnWidth: .20}],renderTo: Ext.getBody()});![]()
8)Ext.layout.container.Tablelayout : 'table' 表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的<table></table>标签。var tableLayout = Ext.create( 'Ext.panel.Panel' ,{width: 300,height: 150,layout : {type : 'table',columns : 3},defaults: {// applied to each contained panelbodyStyle: 'padding:20px'},items: [{html: 'A table' ,rowspan: 2},{html: 'B table' ,colspan: 2},{html: 'C table' ,cellCls: 'highlight'},{html: 'D table'}]
});
![]()
9)Ext.layout.container.VBox 垂直布局a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边
2、center：组件在容器中间
3、end：组件在容器的下边
10)Ext.layout.container.HBox 水平布局a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边
2、center：组件在容器中间
3、end：组件在容器的右边
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
