第六讲：ExtJS布局方式
示例一：两个嵌套子面板。
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, 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:"面板二" }) ] }) } ); |
ContainerLayout容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。
如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建
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({ 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)); 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", 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', 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:'子面板五'} ] }) } ); |
这个东西南北中的布局方式，和easyUI中我遇到的一个项目很很相似！
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 }] }) } ); |