《learning ext 翻译(十三)》由会员分享，可在线阅读，更多相关《learning ext 翻译(十三)（19页珍藏版）》请在金锄头文库上搜索。
1、第七章 layout（布局）layout（布局）可以让表单、表格等控件继承到一个 web 应用中。最常见的布局可以在操作系统中找到，例如微软的 windwos，它利用的就是 border layout（边界布局），resizable region（可改变大小的区域），accordions （层叠面板）， tabs（标签页）和其它能能想到的东西。为了让不同浏览器有同样的用户界面，ExtJS 提供了强大的 layout management syestem（布局管理系统）。布局中的每一部分都可以被管理和控制，你可以移动或者隐藏它们，然后你可以通过单击一个按钮来在你需要的时候显示它们。在这章中，我们
2、将学到： 为一个应用进行布局； 建立标签布局； 通过 layout 管理 Ext 控件； 学习高级嵌套的 layout。什么是 layout，region 和 viewport？Ext 使用 Panel（面板）作为大多数 layout 的基础。我们已经使用了其中的一些，如 FormPanel（表单面板）、GridPanel （表格面板）。viewport 有点像 panel，它包含了整个布局，填充浏览器的整个可视区域。在我们的第一个例子中，我们将使用 viewport 和 border layout 来包含多个 Panel。viewport 有 region（区域），如同罗盘一样，有 Nort
3、h（北）、South（南）、East（东）和West（西）这四个 regionCenter（中央）region 显示在中间。这些方向告诉 Panel 该处于 viewport的哪个方位上。在形成多 panel 后，他们之间还会有可移动的边界。这种 layout 叫做“border”layout，region 之间靠一个可拖拽的三维分界线分开。这个示例包含了 4 个 panel region。North：工具栏；West：表单；Center：在标签面板中的 grid；East：包含了文字的面板。注意，这里没有”South”panel不是所有的区域都要被设置。我们的第一个 layout：在我们建立
4、如上所示的包含四个 region 的 layout 之前先建立一个包含全部区域的 layout，然后再把 south 面板去掉。我们把所有区域都应用为 Panel。var viewport = new Ext.Viewport(layout: border,renderTo: Ext.getBody(),items: region: north, xtype: panel,html: North,region: west,xtype: panel,split: true,width: 200,html: West,region: center,xtype: panel,html: Center
5、,region: east,xtype: panel,split: true,width: 200,html: East,region: south,xtype: panel,html: South);每个 region 被定义了四个方向 East、West、North 、South 中的一个。center 区域会被用来填充剩余空间。为了区别各个区域，我们在 html 配置项中添加了相应的文本（你可以使用更复杂的HTML，但是我们现在使用最简单的来说明问题）。N：ExtJS 提供了跨浏览器的、简单的对 body 元素的引用方法，使用 Ext.getBody()；如果工作正常，浏览器如下所示：可
6、以往每个 region（区域）中添加其他的控件，也可以通过分割来嵌套区域，例如，center 可以被水平分割出自己的 south 区域。N：“Center”区域必须被定义，否则会产生错误并显示混乱。分割 region：分割线的建立是靠配置 split 属性分割线的位置由布局中的面板决定。split：true对于该页面，我们为 West 和 East 区域设置了 split。默认的，它会使得边界成为一个可改变大小的元素，从而用来改变面板的大小。我需要配置项：通常来说，当使用了 split，它会和其他一些有用的配置项一起使用，例如：width、minSize 和collapseMode。这里列出一
7、些常用的选项：选项 值 说明split true/false 布尔值，决定是否在两个区域间放置可拖拽分割线。collapsible true/false 布尔值，向标题栏中添加一个按钮，用户可以通过单击来收起一个区域。collapseMode 只有”mini” 一种mode（模式），对于其他当设置为“mini”时候，分割线上会出现一个收起按钮，点击后，会将面板缩起来。mode，值为undefinedtitle String 标题栏中的标题。bodyStyle CSS Panel 的 body 元素的 CSS 样式。minsize 像素 用户可以把 panel 拖拽的最小值。maxsize 像素
8、 用户可以把 panel 拖拽的最大值。margins 按照上右下左的顺寻设置的像素值Panel 和边缘的距离，添加的空白处于 panel 的 body 之外。cmargins 同上 和 margins 的思想一样，但是只应用于 panel 收起之后。让我们在 west 面板中添加一些这里的配置项：region: west,xtype: panel,split: true,collapsible: true,collapseMode: mini,title: Some Info,bodyStyle:padding:5px;,width: 200,minSize: 200,html: West会
9、有如下的效果：N：展开和收起一个 panel 时，如果 panel 没有设置 width，将会出现渲染错误。因此，最好为panel 设置宽度 当然除了 center，因为这个 panel 是自动填充剩余空间的。Tab panels（标签面板）：在 Ext 中 tab panels 又被叫做“卡片”布局，因为它工作起来就像层叠的卡片，每个卡片都可以存在于其它的卡片上方或者下方。我们可以发现 tab panel 的基本功能和普通的 panel 一样，包含标题，工具栏，和其他常用配置。添加一个 tab panel：如果 ExtJS 的组件是一个 panel 类型的组件，例如 GridPanel 和
10、FormPanel，我们就可以通过使用 xtype 直接将其加入布局中。让我们从建立一个 tabPanel 开始：region: center,xtype: tabpanel,items: title: Movie Grid,html: Centeritems 配置是一个包含对象的数组，定义了每个标签页。title 是唯一一个必须设定的属性， html用来填充标签页，来给我们空白的标签一些内容。我们还需要添加一个 activeTab 配置来设置初始激活的标签为哪个。它的值为从左到右的标签的序号（从 0 开始）。如果不设置 activeTab 则初始化为空面板，直到选择某个标签。region:
11、center,xtype: tabpanel,activeTab: 0,items: title: Movie Grid,html: Center结果如下：为 items 添加更多项目可以新建标签。每个 item 就是一个面板(panel) ，显示与否取决于你是否单击了对应的标签 title。region: center,xtype: tabpanel,activeTab: 0,items: title: Movie Grid,html: Center ,title: Movie Descriptions,html: Movie InfoMovie Grid 和 Movie Descripti
12、ons 标签现在还是简单的面板。所以，让我们为其添加一些配置项和控件。随处的控件：前面我曾提到所有类型的 Panel 都可以直接加到布局中，如同标签面板中一样。让我们往布局中再添加另一个控件grid。向 tabpanel 中添加 grid：我们可以先把 grid 添加到一个标签中：添加 xtype 配置项到 grid 的配置代码中（该代码在第五章中有），我们就可以建立一个 grid 标签：region: center,xtype: tabpanel,activeTab: 0,items: title: Movie Grid,xtype: gridpanel,store: store,autoE
13、xpandColumn: title,columns: / add column model /,view: / add grid view spec / ,title: Movie Descriptions,html: Movie InfoN：xtype 提供了一种实例化新组件的快捷方式。有时我们称这种方式为”lazy rendering”（惰性渲染），因为组件在它们执行任何代码前一直闲置地等待显示。这种方式可以帮助我们节省内存。当我们向标签中添加 grid 的时候，我们不再需要一些配置了（如renderT、width 、 height、frame ）。 grid 的大小，标题和 grid
14、的边框都被 tab panel 处理了。现在布局如下所示：Accordions（手风琴）：accordion 是一种很有用的 layout，它的工作方式有点像 tab panel，在同一空间里集成了多个部分，但是每次只能显示其中一个。这种布局常常用在缺乏水平空间但是有充分的垂直空间的时候（tab panel 解决不了）。当其中一个 accordion 面板展开的时候，其它的将会折叠起来。收起和折叠一个panel 可以通过点击 panel 的标题或者点击最右端的 plus/minus 图标。在 tab 中嵌入 accordion：我们可以通过嵌套来实现复杂的布局。在本例中，我们将一个 accor
15、dion 面板嵌套到一个标签页中。将 layout 设置为“accordion”并且添加 3 个 item，我们可以在 accordion 布局中建立 3 个面板(panel)。title: Movie Descriptions,layout: accordion,items: title: Office Space,autoLoad: html/1.txt,title: Super Troopers,autoLoad: html/3.txt,title: American Beauty,autoLoad: html/4.txt现在，一个标签页中包含了 3 个 accordion 面板，分别加载了 3 个文本文件。注意，这里的配置和 tab panel 很相似 控件间的一致性可以是我们在建立不同控件的时候不用查看每个的 API 文档。当我们切换到 Movie Description 标签的时候，会看到如下结果：现在每个面板中都包含了电影简介了。让我们仔细看下以下配置项：autoLoad: html/1.txt它从一个 URL 加载了一个文件
