原文地址:http://my.oschina.net/jgy/blog/58102
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:字符类型,指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:控件横向拉伸,宽度为最宽控件的宽。
b)pack : 字符类型,指示组件在容器的位置,有如下几种属性。
10)Ext.layout.container.HBox 水平布局
a)align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:垂直拉伸,并且组件以最高高度的组件为准。
b)pack : 字符类型,指示组件在容器的位置,有如下几种属性。
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:字符类型,指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:控件横向拉伸,宽度为最宽控件的宽。
b)pack : 字符类型,指示组件在容器的位置,有如下几种属性。
10)Ext.layout.container.HBox 水平布局
a)align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:垂直拉伸,并且组件以最高高度的组件为准。
b)pack : 字符类型,指示组件在容器的位置,有如下几种属性。