ExtJS基础第六讲学习------布局方式

ゝ一世哀愁。 2022-04-17 00:40 271阅读 0赞

第六讲：ExtJS布局方式

示例一：两个嵌套子面板。

ContainerLayout容器布局

Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。

如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建

Fit布局，用于嵌套布局时使之自适应容器大小，通常用于菜单，表单等的嵌套布局。 Fit布局顾名思义，Fit即“自适应”的意思，通常使用在我们进行嵌套布局的时候使用。

示例二：使用Fit布局。

Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。

示例三：Accordion布局

Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。

示例四：Card布局

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { var&nbsp;panel = new&nbsp;Ext.Panel({ renderTo:hello, layout:"card", activeItem:0, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new&nbsp;Ext.Panel({ width:200, height:100, title:"面板一", html:"面板一内容" }), new&nbsp;Ext.Panel({ width:200, height:100, title:"面板二", html:"面板二内容" }) ], buttons:[ new&nbsp;Ext.Button({text:"上一页",handler:changePage}), new&nbsp;Ext.Button({text:"下一页",handler:changePage}) ] }) &nbsp; function&nbsp;changePage(btn) { var&nbsp;index = Number(panel.layout.activeItem.id.substring(12)); if(btn.text == '上一页'){ index -= 1; if(index &lt; 1){ index = 1; } }else{ index += 1; if(index &gt; 2){ index = 2; } } panel.layout.setActiveItem('ext-comp-100'+index); } } ); </td> 
 </tr> 
 </tbody> 
</table>

AnchorLayout是最简单的布局管理器，它只是将元素按照配置的属性在元素容器中进行定位。

示例五：Anchor布局之按比例显示子面板

示例六：设置子面板偏移父面板的偏移量

AbsoluteLayout布局扩展自Ext.layout.AnchorLayout布局，对应面板布局（layout）配置项的名称为absolute。它可以根据子面板中配置的x/y坐标进行定位，并且坐标值支持使用固定值和百分比两种形式。

示例七：使用固定值进行定位。

示例八：使用百分比进行定位。

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

省略写法

Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

Ext.layout.TableLayout对应面板布局layout配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！

这个东西南北中的布局方式，和easyUI中我遇到的一个项目很很相似！

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

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { var&nbsp;panel = new&nbsp;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 }] }) } ); </td> 
 </tr> 
 </tbody> 
</table>