extjs html 布局实例,浅谈ExtJS的布局

ExtJs的最大特性之一就是可用简单的方法来进行布局。我们可通过合适的类来定义固定布局或非固定布局。比如，我们来为容器内的子组件设置布局时，如没有定义布局，则缺省使用auto布局。auto布局是将子组件在容器内一个接一个的来显示的。

ExtJs中可以用很多布局来安排组件，比如：accordions,cards,columns,table等。

一些常用的布局有：

边界布局

适应布局

卡片布局

手风琴布局

锚定布局

边界布局

边界布局(border) 将容器空间分成了5个区域：north,south,west,east和center。可以将子组件放在任意区域，但是必须要使用center区域。

Ext.onReady(function(){

Ext.create('Ext.panel.Panel', {

width: 600,

height: 400,

title: 'Border Layout',

layout: 'border', //指定为边界布局

items: [{

xtype: 'panel',

title: '南区',

region: 'south', // region

height: 100

},{

xtype: 'panel',

title: '西区',

region:'west', // region

width: 200,

collapsible: true,

layout: 'fit'

},{

title: '中间区域',

region: 'center',

layout: 'fit',

html:'中间区'

}],

renderTo: Ext.getBody()

});

});

适应布局

适应布局(fit)一般用于容器内只有一个组件时。这样组件会占用容器的所有可用空间，当容器改变大小时，组件会跟着容器来适应新的尺寸大小。

如下代码：

Ext.onReady(function(){

var win = Ext.create("Ext.window.Window",{

title: "我的窗体",

width: 200,

height: 200,

layout: "fit",

defaults: {

xtype: "panel",

height: 60,

border: false

},

items: [

{title: "Menu", html: "主菜单"},

{title: "Content", html: "主内容!"}

]

});

win.show();

});

卡片布局

手风琴布局

锚定布局