table
Table Layout
Ext.onReady(function() {
var panel = Ext.create('Ext.Panel',{
id:'Panel',
baseCls:'x-plain',
renderTo:Ext.getBody(),
layout:{
type:'table',
columns:3
},
defaults:{
frame:true,
width:200,
height:200
},
items:[{
title:'Sub1'
},
{
title:'Sub2'
},
{
title:'Sub3'
},
{
title:'Sub4',
width:410,
colspan:2
},
{
title:'Sub5',
rowspan:2,
height:410
}
]
});
});
Box
box.html
Box演示
Ext.onReady(function(){
Ext.create('Ext.Viewport',{
title:'Box演示',
width:600,
height:100,
items:[{
layout: {
type:'hbox',
type:'vbox',
padding:'10',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
})
Border
Border Layout
Ext.require(['*']);
Ext.onReady(function() {
var newRegions = [{
region: 'north',
title: 'North 2',
height: 100,
collapsible: true,
weight: -120
}, {
region: 'east',
title: 'East 2',
width: 100,
collapsible: true,
weight: -110
}, {
region: 'west',
title: 'West 2',
width: 100,
collapsible: true,
weight: -110
}];
var viewport = Ext.create('Ext.Viewport',{
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items:[{
region:'north',
collapsible:true,
title:'North',
split:true,
height:100,
minHeight:60,
html:'This is north'
},{
region:'west',
collapsible:true,
title:'West for 30%',
width:'30%',
split:true,
minWidth:100,
minHeight:140,
bodyPadding:10,
html:'30% width for west'
},{
region:'center',
html:'This is Center',
title:'Center',
minHeight:80,
collapsible:true,
split:true
},{
region:'east',
collapsible:true,
split:true,
width:300,
minHeight:140,
minWidth:120,
title:'East',
floatable:true
},{
region: 'south',
height: 100,
split: true,
collapsible: true,
title: 'Splitter south -100',
minHeight: 60,
html: 'center south',
weight: -100
},{
region: 'south',
collapsible: true,
split: true,
height: 200,
minHeight: 120,
title: 'South',
layout: {
type: 'border',
padding: 5
},
items: [{
title: 'South Central',
region: 'center',
minWidth: 80,
html: 'South Central'
}, {
title: 'South Eastern',
region: 'east',
flex: 1,
minWidth: 80,
html: 'South Eastern',
split: true,
collapsible: true
}, {
title: 'South Western - not resizable',
region: 'west',
flex: 1,
minWidth: 80,
html: 'South Western
I collapse to nothing',
split: true,
collapsible: true,
splitterResize: false,
collapseMode: 'mini'
}]
}]
});
});
Anchor
Anchor Layout Example
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout:'anchor',
items:[{
title:'Item 1',
html:'100% 20%',
anchor:'100% 20%'
},{
title:'Item 2',
html:'50% 30%',
anchor:'50% 30%'
},{
title:'Item 3',
html:'-100 50%',
anchor:'-100 50%'
}]
});
});
Column
Column Layout
Ext.require(['*']);
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport',{
layout:'column',
autoScroll:true,
defaultType:'container',
items:[{
columnWidth:1/3,
padding:'5 0 5 5',
items:[{
title:'Sub1',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:1/3,
padding:'5 0 5 5',
items:[{
title:'Sub2',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:1/3,
padding:5,
items:[{
title:'Sub3_1',
html: Ext.example.shortBogusMarkup
},{
margin:'5 0 0 0',
title:'Sub3_2',
html: Ext.example.shortBogusMarkup
}]
}]
});
});
官方综合使用布局的例子
Ext.require(['*']);
Ext.onReady(function() {
Ext.QuickTips.init();
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'north - generally for menus, toolbars and/or advertisements
'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
}, {
xtype: 'tabpanel',
region: 'east',
title: 'East Side',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ '->', {
xtype: 'button',
text: 'test',
tooltip: 'Test Button'
}]
}],
animCollapse: true,
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
html: 'A TabPanel component can be a region.
',
title: 'A Tab',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
}, {
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
contentEl: 'west',
title: 'Navigation',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: 'Some settings in here.
',
iconCls: 'settings'
}, {
title: 'Information',
html: 'Some info in here.
',
iconCls: 'info'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
});