Ext.onReady(function(){
var window = new Ext.Window({
layout: "column",
title: "Hello World",
id: "helloWorldWindow",
bodyStyle: "padding:10px;",
width: 550,
height: 300,
x: 100,
y: 100,
items: [
{
columnWidth: .6,
baseCls: "x-plain",
frame: true,
layout: "form",
bodyStyle: "padding:5px;",
items: [
{xtype: "textfield", fieldLabel: "UserName"},
{xtype: "textfield", fieldLabel: "Age"}
]
},
{
columnWidth: .3,
baseCls: "x-plain",
bodyStyle: "padding:5px;",
items: [
{xtype: "textarea"}
]
},
{
columnWidth: .1,
baseCls: "x-plain",
bodyStyle: "padding:5px;",
layout: "form",
items: [
{
xtype: "button",
text: "Ok",
handler: function() {
alert("OK");
}
},
{
xtype: "button",
text: "Cancel",
handler: function() {
alert("Cancel");
}
}
]
}
]
});

window.render(Ext.getDom("tt"));
window.show();
});

Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。

Ext.onReady(
function(){
var win = new Ext.Window({
title: "Hello World",
renderTo: Ext.getDom("tt"),
width: 400,
height: 250,
x: 150,
y: 50,
layout: "fit",
items: [
{xtype:"panel", title:"O"},
{xtype:"panel", title:"K"}
]
});

win.show();
}
);

一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

Ext.onReady(
function() {
new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
height:80,
xtype: "label",
//style: "border: 1px solid red;padding:1px;",
frame: true,
text: "cdred.net study club"
},
{
region:"south",
height:20,
xtype:'label',
text:'Status show zone..'
},
{
region:"center",
title:"中央面板"
},
{
region:"west",
width:200,
title:"系统栏目",
collapsible: true
},
{
region:"east",
width:150,
collapsed: true,
collapsible: true,
title:"在线好友"
}

]

});
}
);

4.accordion Layout

5 form Layout

Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。

6 table Layout

7 card Layout

Ext.onReady(function() {
var i = 0;
var navHandler = function(direction){
i += direction;
Ext.getCmp("card").getLayout().setActiveItem(i);
if (i == 2) {
Ext.getCmp("move-next").setDisabled(true);
} else if (i == 0) {
Ext.getCmp("move-prev").setDisabled(true);
} else {
Ext.getCmp("move-next").setDisabled(false);
Ext.getCmp("move-prev").setDisabled(false);
}

};
var card = new Ext.Panel({
id: "card",
title : 'Example Wizard',
layout : 'card',
activeItem : 0,
bodyStyle : 'padding:15px',
defaults : {
border : false
},

bbar : [{
id : 'move-prev',
text : 'Back',
handler : navHandler.createDelegate(this, [-1]),
disabled : true
}, '->',
{
id : 'move-next',
text : 'Next',
handler : navHandler.createDelegate(this, [1])
}],

items : [{
id : 'card-0',
html : '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
}, {
id : 'card-1',
html : '<p>Step 2 of 3</p>'
}, {
id : 'card-2',
html : '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});
card.render(Ext.getDom("tt"));
});

Ext.onReady(exe);

function exe() {
var form = new Ext.form.FormPanel({
title : 'Absolute Layout',
frame : true,
layout : 'absolute',
x: 100,
y: 40,
height: 500,
layoutConfig : {
extraCls : 'x-abs-layout-item'
},
defaultType : 'textfield',
items : [{
x : 0,
y : 5,
xtype : 'label',
text : 'Send To:'
}, {
x : 60,
y : 0,
name : 'to',
anchor : '100%'

}, {
x : 0,
y : 35,
xtype : 'label',
text : 'Subject:'
}, {
x : 60,
y : 30,
name : 'subject',
anchor : '100%'

}, {
x : 0,
y : 60,
xtype : 'textarea',
name : 'msg',
anchor : '100% 100%'

}]
});

form.render(Ext.getDom("tt"));
}