5.ExtJS布局
目录：
一、ContainerLayout容器布局
二、Fit布局
三、Accordion布局
四、Card布局
五、AnchorLayout锚点布局
六、AbsoluteLayout绝对布局
七、Form布局
八、Column列布局
九、Ext.layout.TableLayout表格布局
十、Border边界布局
一、ContainerLayout容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。
如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建
示例一：两个嵌套子面板。
Ext.onReady(function() { new Ext.Panel({ renderTo : hello, width : 400, height : 300, title : "我是Panel", autoScroll : true, collapsible : true,
frame:true,//渲染颜色 items : [new Ext.Panel({//panel的items默认就是一个panel width : 200, height : 100,
frame:true, title : "面板一" }), new Ext.Panel({ width : 200, height : 100, title : "面板二" })] }) });
不使用frame:true与使用的情况
二、Fit布局
用于嵌套布局时使之自适应容器大小，通常用于菜单，表单等的嵌套布局。 Fit布局顾名思义，Fit即“自适应”的意思，通常使用在我们进行嵌套布局的时候使用。
示例二：使用Fit布局。
Ext.onReady(function() { new Ext.Panel({ renderTo : hello, layout : "fit", width : 400, height : 300, title : "我是Panel", autoScroll : true, collapsible : true, items : [new Ext.Panel({ width : 200, height : 100, title : "面板一" }), new Ext.Panel({ width : 200, height : 100, title : "面板二" })] }) });
显示效果子面板全部填充到父面板中
三、Accordion布局
由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。
示例三：Accordion布局
Ext.onReady(function() { new Ext.Panel({ renderTo : hello, layout : "accordion", width : 400, height : 300, title : "我是Panel", autoScroll : true, collapsible : true, items : [new Ext.Panel({ width : 200, height : 100, title : "面板一", html : "面板一内容" }), new Ext.Panel({ width : 200, height : 100, title : "面板二", html : "面板二内容" })] }) } );
四、Card布局
由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。
示例四：Card布局
Ext.onReady(function() { var panel = new Ext.Panel({ renderTo : hello, layout : "card", activeItem : 0,//指定当前活动面板 width : 400, height : 300, title : "我是Panel", autoScroll : true, collapsible : true, items : [new Ext.Panel({ //注意再次需要进行new width : 200, height : 100, title : "面板一", html : "面板一内容" }), new Ext.Panel({ width : 200, height : 100, title : "面板二", html : "面板二内容" })], buttons : [new Ext.Button({ text : "上一页", handler : changePage }), new Ext.Button({ text : "下一页", handler : changePage })] }) function changePage(btn) { var index = Number(panel.layout.activeItem.id.substring(12));//子面板的id默认为：ext-comp-100X 直接进行拼接即可 Number(字符串)将数字字符串转化为数字 if (btn.text == '上一页') { index -= 1; if (index < 1) { index = 1; } } else { index += 1; if (index > 2) { index = 2; } } panel.layout.setActiveItem('ext-comp-100' + index); } } );
五、AnchorLayout锚点布局
最简单的布局管理器，它只是将元素按照配置的属性在元素容器中进行定位。
示例五：Anchor布局之按比例显示子面板
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"50% 50%", title:"面板一", html:"面板一内容" }), new Ext.Panel({ anchor:"50% 50%", title:"面板二", html:"面板二内容" }) ] }) } );
示例六：设置子面板偏移父面板的偏移量
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"-100 -100", //比父面板少100像素 title:"面板一", html:"面板一内容" }) ] }) } );
六、AbsoluteLayout绝对布局
扩展自Ext.layout.AnchorLayout布局，对应面板布局（layout）配置项的名称为absolute。它可以根据子面板中配置的x/y坐标进行定位，并且坐标值支持使用固定值和百分比两种形式。
示例七：使用固定值进行定位。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"absolute", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ x:10, y:10, width:200, height:100, title:"面板一", html:"面板一内容" }) ] }) } );
示例八：使用百分比进行定位。
Ext.onReady(function() { var panel = new Ext.Panel({ renderTo : hello, layout : "absolute", width : 400, height : 300, title : "我是Panel", autoScroll : true, collapsible : true, items : [new Ext.Panel({ x : '10%', y : '10%', width : 200, height : 100, title : "面板一", html : "面板一内容" })] }) });
七、Form布局
由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right",//标签右对齐 items:[ new Ext.form.TextField({ fieldLabel:'用户名', allowBlank : false }), new Ext.form.TextField({ fieldLabel:'密码', allowBlank : false }) ] }) } );
省略写法
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right", defaultType:'textfield',//指定类型 itmes不需要创建TextField items:[ { fieldLabel:'用户名', allowBlank : false }, { fieldLabel:'密码', allowBlank : false } ] }) } );
八、Column列布局
由Ext.layout.ColumnLayout类定义，名称为column。
列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。
columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"column", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ { title:'子面板一', columnWidth:.2, height : 100 }, { title:'子面板二', columnWidth:.2, height : 100 }, { title:'子面板三', columnWidth:.2, height : 100 }, { title:'子面板四', columnWidth:.2, height : 100 }, { title:'子面板五', columnWidth:.2, height : 100 } ] }) } );
九、Ext.layout.TableLayout表格布局
对应面板布局layout配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"table", layoutConfig : { columns : 4 //设置表格布局默认列数为4列 }, width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title:'子面板一', colspan : 3//设置跨列 }, { title:'子面板二', rowspan : 2,//设置跨行 height : 100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] }) } );
十、Border边界布局
由类Ext.layout.BorderLayout定义，布局名称为border。
该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，
在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"border", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title: 'north Panel', html : '上边', region: 'north',//指定子面板所在区域为north height: 50 }, { title: 'South Panel', html : '下边', region: 'south',//指定子面板所在区域为south height: 50 },{ title: 'West Panel', html : '左边', region:'west',//指定子面板所在区域为west width: 100 },{ title: 'east Panel', html : '右边', region:'east',//指定子面板所在区域为east width: 100 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] }) } );
