EXT标准布局类

面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：
ContainerLayout（容器布局）
FitLayout（自适应布局）
AccordionLayout（折叠布局）
CardLayout（卡片式布局）
AnchorLayout（锚点布局）
AbsoluteLayout（绝对位置布局）
FormLayout（表单布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（边框布局）
接下来分别介绍这10种布局类的特点及使用方式。

1 ContainerLayout容器布局

Ext.layout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。

表5-4 Ext.layout.ContainerLayout主要配置项目表

?

?

?

2 FitLayout自适应布局

Ext.layout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。
注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。
下面是自适应布局的一个简单的示例。
代码5-7：FitLayout（自适应布局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout :'fit',
title:'Ext.layout.FitLayout布局示例',
frame:true, //渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : { //设置默认属性
bodyStyle:'background-color:#FFFFFF' //设置面板体的背景色
},
//面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改
items: [
{
title : '嵌套面板一',
html : '面板一'
},
{
title : '嵌套面板二',
html : '面板二'
}
]
})
});
</script>
在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图 5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。

图5-11 Ext.layout.FitLayout布局示例

Ext.layout.Accordion 扩展自 Ext.layout.FitLayout 布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。

表5-5 Ext.layout.Accordion主要配置项目表

?

配置项	?	参数类型	说明
activeOnTop	?	Boolean	是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动。
animate	?	Boolean	设 免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 请问：当输入框换行的有关问题 Extjs温习笔记（十三）- GridPanel ExtJS的columnModel不能自动宽度吗,该如何处理 【转载】深入懂得Javascript之this关键字 怎么用javascript给text赋值 js替jsp页面元素赋值。为taglib参数赋值 国外经典JS、Jquery 各种资源会合 JS结合Ajax获取function的返回值，求教！该怎么解决 Ajax和JSON简略应用示例 推荐阅读更多> 100分真心求div 随便移动代码 这道题想不明白解决方案 念自己写个blog JSEclipse离线上载包 怎么用DOM加入新的 ul javascript跨域有关问题解决方案汇总 求帮忙分析一个判断整数或小数的正则,该怎么处理 An internal error occurred during: "Requesting JavaScript AST from selection" 怎么使用google 地图 js v3版根获取行政区域的边界坐标并且判读是否在莫伊行政区域内 js兑现购物车 JS兑现按钮跳转到新页面 JavaScript 学习札记十四 this特性，静态方法 和实例方法，prototype Spring3+Hibernate4+SpringMVC调整Ext：JSON数据格式传输 关于js中调用绝对位置数值不成功的有关问题 javascript对象的有关问题，求大神解释 JS 回来顶部 js中的for( in )功用，效果 框架集中对元素的访问的有关问题 iframe响移动层的拖动,该怎么解决 JSP中动态INCLUDE与静态INCLUDE的差异