您的位置：首页 > Web前端 > JavaScript

ExtJS2.0开发与实践笔记[2]——Ext中的Layout

2008-03-18 22:58 573 查看
我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。

如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。
();
//加载onReady
Ext.onReady(LayoutExt.init, LayoutExt, true);

LayoutExt.html(定义html页面，设定及引用ext)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt</title>
<!--加载ExtJs资源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<!--我的js-->
<!--样式-->
</head>
<body>
<div id="north" class="x-layout-inactive-content">
北方
</div>
<div id="west" class="x-layout-inactive-content">
西方
</div>
<div id="east" class="x-layout-inactive-content">
东方
</div>
<div id="south" class="x-layout-inactive-content">
南方
</div>
<div id="center1" class="x-layout-inactive-content">
中央区域1
</div>
<div id="center2" class="x-layout-inactive-content">
中央区域2
</div>
</body>
</html>

显示效果如下图：

LayoutExt2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt2</title>
<!--加载ExtJs资源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<!--我的js-->
<script type="text/javascript" src="LayoutExt2.js"></script>
<!--样式-->
</head>
<body>
<div id="center" class="x-layout-inactive-content"/>
<div id="west" class="x-layout-inactive-content"/>
<div id="south" class="x-layout-inactive-content"/>
</body>
</html>

效果图如下：



以上是我们手动进行的layout设置，其实在大多数时候，我们也可以利用Ext提供给我们的现成布局样式完成操作。

每种布局类都支持其特定的配置选项。关于布局每种配置选项可参考API文档。





ContainerLayout
其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。ContainerLayout 没有任何的外观表示— 其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resize buffering）。 ContainerLayout常用于扩展制定的布局，很少实例化直接使用。详细在API 参考.



CardLayout
CardLayout将容器中的每个组件当作一个卡片来处理。在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。参阅API 参考。





AbsoluteLayout

这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.





ColumnLayout

适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.





AccordionLayout

AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.





FitLayout

这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.





AnchorLayout

这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。





FormLayout

FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。注意，一般来讲，和FormPanel相似，该布局类都有表单提交的自动处理，你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要的一个布局将其嵌套。 参阅API文档。





BorderLayout

与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。





TableLayout

主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航