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	设 免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 怎么把字符串用分隔符存到jquery数组里面 求JS单步回退得实现,该怎么处理 js 处置url地址,解析url地址 easyui-datagrid 的 load 方法该如何使用 jsp学习札记（一） div的mousedown、mousemove和mouseup事件有关问题 javascript+jsp数组有关问题 js读取xml的有关问题 请帮小弟我改改下面的代码，如何将nodes声明或定义一下 推荐阅读更多> 为什么小弟我要称自己为Javascript软件工程师 请教dropdownlist是不是只可以在asp中使用啊 javascript有关问题, nodejs札记1 JavaScript 判断字符串是不是含有中文 （实用） 关于iframe的小疑点 jsp中页面封锁时关闭session，cookie，页面缓存 js中怎么实现二维数组的转置。 代码优化？怎么解决控件取值硬编码控件ID带来维护有关问题 如何用js生成二维json JavaScript 学习札记 三 原型(prototype) 纯js 操作dom回动态添加一行删除一行 请教现在有专门培训JavaScript和JQuery的地方吗 帮忙解释下：scrollTop、offsetTop?解决方法 翻阅Ext学习Js(二)-extend从继承说起 js jqgrid 宽度有关问题 滚动条出现时调整宽度 js获取项目根路径的步骤 新人对JS的前景想听听各位们及大牛们的意见 javascript的一些细节学问 求问怎么动态生成Span