《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 加载了一个文件