ExtJs3.0 layout篇
主要是为了给自己做总结的，所以只贴了代码，如果有看不懂的还是请参照ExtJs3.0 的Example吧
Accordion 上下，帘子效果
Anchor 个人感觉不是很有用，负的和百分比来分
Column 以列为单位
Table 有点像合并单元格
Vbox and hbox主要是按钮的排版和按钮加同行的排版
Form 表单比较简单
Fit 第一个顶掉其他的
Card 卡片式的，一次NEXT只有一个页面
Border 用的比较频繁，主要分为“东西南北中”
Absolute是自定义的，靠X,Y决定panel的位置
目前看到的好像就这么几个，用到再差文档吧！~
一个比较复杂的布局例子
Accordion 上下，帘子效果
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Accordion Item 1',
html: '<empty panel>',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});
var item4 = new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls:'empty'
});
var item5 = new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/><empty center panel>'
}]
});
});
Anchor 个人感觉不是很有用，负的和百分比来分
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'anchor',
anchorSize: {width:1024, height:600},
items:[{
title:'Item 1',
html:'Content 1',
width:800,
anchor:'right 20%'
},{
title:'Item 2',
html:'Content 2',
width:300,
anchor:'50% 30%'
},{
title:'Item 3',
html:'Content 3',
width:600,
anchor:'-100 50%'
}]
});
});
Column 以列为单位
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
region:'center',
margins:'35 5 5 0',
layout:'column',
autoScroll:true,
items:[{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
});
Table 有点像合并单元格
Ext.onReady(function() {
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:3},
// applied to child components
defaults: {frame:true, width:200, height: 200},
items:[{
title:'Item 1'
},{
title:'Item 2'
},{
title:'Item 3'
},{
title:'Item 4',
width:410,
colspan:2
},{
title:'Item 5'
},{
title:'Item 6'
},{
title:'Item 7',
width:410,
colspan:2
},{
title:'Item 8'
}]
});
});
Vbox and hbox主要是按钮的排版和按钮加同行的排版
Form 表单比较简单
Fit 第一个顶掉其他的
Card 卡片式的，一次NEXT只有一个页面
Border 用的比较频繁，主要分为“东西南北中”
Absolute是自定义的，靠X,Y决定panel的位置
目前看到的好像就这么几个，用到再差文档吧！~
一个比较复杂的布局例子
Ext.onReady(function(){
// 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(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 1, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
new Ext.TabPanel({
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();
});
});