Learning EXT 翻译(十三)

《Learning EXT 翻译(十三)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第七章layout（布局）layout（布局）可以让表单、表格等控件继承到一个web应用中。最常见的布局可以在操作系统中找到，例如微软的windwos，它利用的就是borderlayout（边界布局），resizableregion（可改变大小的区域），accordions（层叠面板），tabs（标签页）和其它能能想到的东西。为了让不同浏览器有同样的用户界面，ExtJS提供了强大的layoutmanagementsyestem（布局管理系统）。布局中的每一部分都可以被管理和控制，你可以移动或者隐藏它们，然

2、后你可以通过单击一个按钮来在你需要的时候显示它们。在这章中，我们将学到：·        为一个应用进行布局；·        建立标签布局；·        通过layout管理Ext控件；·        学习高级嵌套的layout。什么是layout，region和viewport？Ext使用Panel（面板）作为大多数layout的基础。我们已经使用了其中的一些，如FormPanel（表单面板）、GridPanel（表格面板）。viewport有点像panel，它包含了整个布局，填充浏览器的整个可

3、视区域。在我们的第一个例子中，我们将使用viewport和borderlayout来包含多个Panel。viewport有region（区域），如同罗盘一样，有North（北）、South（南）、East（东）和West（西）这四个region——Center（中央）region显示在中间。这些方向告诉Panel该处于viewport的哪个方位上。在形成多panel后，他们之间还会有可移动的边界。这种layout叫做“border”layout，region之间靠一个可拖拽的三维分界线分开。这个示例包含了

4、4个panelregion。North：工具栏；West：表单；Center：在标签面板中的grid；East：包含了文字的面板。注意，这里没有”South”panel——不是所有的区域都要被设置。我们的第一个layout：在我们建立如上所示的包含四个region的layout之前先建立一个包含全部区域的layout，然后再把south面板去掉。我们把所有区域都应用为Panel。varviewport=newExt.Viewport({               layout:'border',    

5、           renderTo:Ext.getBody(),               items:[{                               region:'north',                               xtype:'panel',                               html:'North'               },{                               region:'west', 

6、                              xtype:'panel',                               split:true,                               width:200,                               html:'West'               },{                               region:'center',                     

7、          xtype:'panel',                               html:'Center'               },{                               region:'east',                               xtype:'panel',                               split:true,                               width:

8、200,                               html:'East'               },{                               region:'south',                               xtype:'panel',                               html:'South'               }]