【初学EXT】布局
官网的例子太强大了：http://www.sencha.com/products/extjs/examples/
常用界面都有例子，方便学习使用啊
这一节主要学习布局
学习地址：http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout-browser/layout-browser.html
一、absolute
绝对定位
Ext.onReady(function() {//页面初始化代码
var panel = new Ext.Panel({
text : "展示",
renderTo : document.body,
width : 400,
height : 300,
layout : 'absolute',
items : [ {
title : 'Panel 1',
width : 200,
height : 100,
x : 50,
y : 50,
html : 'Positioned at x:50, y:50'
}, {
title : 'Panel 2',
width : 250,
height : 100,
x : 100,
y : 100,
html : 'Positioned at x:125, y:125'
} ]
});
})
注：
layout : 'absolute',指明布局方式
x : 50,y : 50,指明离X方向，y方向的绝对距离
二、accordion
折叠式面板，默认打开第一个（我首先想到了一些购物网站左侧菜单栏是不是可以用这个实现呢？留待以后尝试）
var panel = new Ext.Panel({
layout: 'accordion',
renderTo : document.body,
width : 200,
height : 200,
items:[{
title: 'Panel 1',
html: 'Content'
},{
title: 'Panel 2',
id: 'panel2',
html: 'Content2'
}]
});
三、anchor
绝对定位
var panel = new Ext.Panel({
renderTo : document.body,
width : 300,
height :400,
layout: 'anchor',
items: [{
title: 'Panel 1',
height: 100,
anchor: '50%',
html: 'Panel 1 50%'
},{
title: 'Panel 2',
height: 100,
anchor: '-100',
html: 'Panel 2 -100'
},{
title: 'Panel 3',
anchor: '-10, -262',
html: 'Panel 3 -10, -262'
}]
});
四、border
边框式
var panel = new Ext.Panel({
renderTo : document.body,
width : 500,
height :400,
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 15
},
items: [{
title: 'top',
region: 'north',
height: 50,
minHeight: 25,
maxHeight: 50,
margins: '5 0 0 5',//上 右 下 左
html:"top content"
},{
title: 'Footer',
region: 'south',
height: 50,
minHeight:25,
maxHeight:50,
margins: '0 0 5 0',//上 右 下 左
html:"Footer content"
},{
title: 'Navigation',
region:'west',
floatable: false,
margins: '5 0 0 0',
width: 100,
minWidth: 50,
maxWidth: 100,
html: "Secondary content like navigation links could go here"
},{
title: 'Main Content',
collapsible: false,
region: 'center',
margins: '5 0 0 0',
html: "Main Page This is where the main content would go"
},{
title: 'right',
region: 'east',
width: 100,
margins: '5 0 0 0',
html:"right content"
}]
});
五、TabPanel
var panel = new Ext.TabPanel({
renderTo : document.body,
width : 200,
height :200,
bodyBorder: true,
activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
});
六、Card (Wizard)
自定义向导风格
var panel = new Ext.Panel({
renderTo : document.body,
width : 300,
height :300,
bodyBorder: true,
bodyStyle: 'padding:15px',
layout:'card',
activeItem: 0, // index or id
bbar: ['->', {
id: 'card-prev',
text: '« Previous',
handler: function(btn) {
},
disabled: true
},{
id: 'card-next',
text: 'Next »',
handler: function(btn) {
}
}],
items: [{
id: 'card-0',
html: 'Step 1'
},{
id: 'card-1',
html: 'Step 2'
},{
id: 'card-2',
html: 'Step 3'
}]
});
注：事件还未学习，按钮点击未实现，待解决
七、column
var panel = new Ext.Panel({
renderTo : document.body,
width : 400,
height : 200,
bodyBorder : true,
bodyStyle : 'padding:15px',
layout : 'column',
items : [ {
title : 'Width = 25%',
columnWidth : .25,
items : [ {
xtype : "button",
text : "Content"
}, {
xtype : "button",
text : "Content"
} ]
}, {
title : 'Width = 75%',
columnWidth : .75,
html : 'Content'
}, {
title : 'Width = 100px',
width : 100,
html : 'Content'
} ]
});
八、Fit
var panel = new Ext.Panel(
{
renderTo : document.body,
width : 400,
height : 200,
bodyBorder : true,
bodyStyle : 'padding:5px',
layout : 'fit',
items : [ {
title : 'Fit Panel',
html : 'A very simple layout that simply\b fills the container with a single panel.\b This is usually the best default layout\b choice when you have no other specific \b layout requirements.',
border : true
} ]
});
九、table
var panel = new Ext.Panel({
renderTo : document.body,
width : 400,
height : 200,
bodyBorder : true,
bodyStyle : 'padding:5px',
layout : {
type : 'table',
// The total column count must be specified here
columns : 3
},
defaults : {
// applied to each contained panel
bodyStyle : 'padding:20px'
},
items : [ {
html : 'Cell A content',
rowspan : 2
}, {
html : 'Cell B content',
colspan : 2
}, {
html : 'Cell C content',
cellCls : 'highlight'
}, {
html : 'Cell D content'
} ]
});
十、vbox
var panel = new Ext.Panel({
renderTo : document.body,
width : 400,
height : 200,
bodyBorder : true,
bodyStyle : 'padding:5px',
title: "VBoxLayout Panel",
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One',
width: 250,
flex: 2//每个子项相对的 flex值都会与全体子项 flex累加的值相比较，根据此结果，处理每个子项的 flex 最后是多少。若不设置，表示不对子项作自适应尺寸的处理
},{
xtype: 'panel',
title: 'Inner Panel Two',
width: 250,
flex: 4
},{
xtype: 'panel',
title: 'Inner Panel Three',
width: '50%',
flex: 4
}]
});
十一、hbox
var panel = new Ext.Panel({
renderTo : document.body,
width : 400,
height : 200,
bodyBorder : true,
bodyStyle : 'padding:5px',
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
}]
});