Learning EXT 翻译(十三).docVIP

第七章 layout（布局） layout（布局）可以让表单、表格等控件继承到一个web应用中。最常见的布局可以在操作系统中找到，例如微软的windwos，它利用的就是border layout（边界布局），resizable region（可改变大小的区域），accordions（层叠面板），tabs（标签页）和其它能能想到的东西。 为了让不同浏览器有同样的用户界面，ExtJS提供了强大的layout management syestem（布局管理系统）。布局中的每一部分都可以被管理和控制，你可以移动或者隐藏它们，然后你可以通过单击一个按钮来在你需要的时候显示它们。 在这章中，我们将学到： ????????? 为一个应用进行布局； ????????? 建立标签布局； ????????? 通过layout管理Ext控件； ????????? 学习高级嵌套的layout。 什么是layout，region和viewport？ Ext使用Panel（面板）作为大多数layout的基础。我们已经使用了其中的一些，如FormPanel（表单面板）、GridPanel（表格面板）。viewport有点像panel，它包含了整个布局，填充浏览器的整个可视区域。在我们的第一个例子中，我们将使用viewport和border layout来包含多个Panel。 viewport有region（区域），如同罗盘一样，有North（北）、South（南）、East（东）和West（西）这四个region——Center（中央）region显示在中间。这些方向告诉Panel该处于viewport的哪个方位上。在形成多panel后，他们之间还会有可移动的边界。 这种layout叫做“border”layout，region之间靠一个可拖拽的三维分界线分开。这个示例包含了4个panel region。 North：工具栏； West：表单； Center：在标签面板中的grid； East：包含了文字的面板。 注意，这里没有”South”panel——不是所有的区域都要被设置。 我们的第一个layout： 在我们建立如上所示的包含四个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 ??????????????? },{ ??????????????????????????????? region: east, ??????????????????????????????? xtype: panel, ??????????????????????????????? split: true, ??????????????????????????????? width: 200, ??????????????????????????????? html: East ??????????????? },{ ??????????????????????????????? region: south, ??????????????????????????????