ExtJS学习笔记 layout的9种样式风格

absolute ：顾名思义，在容器内部，根据指定的坐标定位显示

accordion ：这个是最容易记的，手风琴效果

代码：

Ext.onReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
title:'容器组件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
panel.render('hello');
});
效果如下：



anchor

这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
代码：
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等于100，宽度=容器宽度-50"
});

var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"

});

var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器宽度-250"

});

var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});
效果如下：



border ：将容器分为五个区域:east,south,west,north,center

代码如下：
Ext.onReady(function() {
var win;
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局将页面分成东南西北中五部分，这里是中间
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true
}]
});

//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true,
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});

//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show();

});
效果图：



card ：像安装向导一样，一张一张显示

代码如下：
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}

if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}

var btnNext = Ext.get("move-next").dom.document.getElementsByTagName_r("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName_r("button")[0];

if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}

if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}

card.getLayout().setActiveItem(i);

};

var card = new Ext.Panel({
width: 200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],

items: [{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],

renderTo: "hello"
});

});
效果图：



column ： 把整个容器看成一列,然后向容器放入子元素时

代码：
Ext.onReady(function() {
new Ext.Panel({
renderTo : "hello",
title : "容器组件",
layout : "column",
width : 500,
height : 100,
items : [{title : "列1",
columnWidth : .2
},{title : "列2",
columnWidth : .3
},{title : "列3",
columnWidth : .3
},{title : "列4",
columnWidth : .2
}]
});
});
效果如下：



fit ： 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

代码：
Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:'hello',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});

效果如下：



form ： 是一种专门用于管理表单中输入字段的布局

代码：
Ext.onReady(function() {
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
{
fieldLabel:"呢称",
name:"nickname"
},
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
});
效果如下：



这个输入用的比较多，有个比较全的，网址：http://www.17ext.com/showtopic-255.aspx ，需要什么就去改什么吧 ：）

table ： 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

代码：
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo : "hello",
title : "容器组件",
width : 500,
height : 200,
layout : "table",
layoutConfig : {
columns : 3
},
items : [{
title : "子元素1",
html : "这是子元素1中的内容",
rowspan : 2,
height : 100
},{
title : "子元素2",
html : "这是子元素2中的内容",
colspan : 2
},{
title : "子元素3",
html : "这是子元素3中的内容"
},{
title : "子元素4",
html : "这是子元素4中的内容"
}]
});
});
效果如下：