Ext学习5

EXtT的布局（Layout）

       Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。

        面板（Panel）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,Grid面板 GridPanel,和Tree面板 TreePanel。

        简单的例子 

         下面的layout包含 north, south, east, west,和center的区域，而且每个区域包含一个ContentPanel，各区域之间使用得了分隔条分割开。

        var mainLayout = new Ext.BorderLayout(document.body, 

              { north:

                      { split: true, initialSize: 50 }, 

               south:

                     { split: true, initialSize: 50 }, 

               east:

                    { split: true, initialSize: 100}, 

              west: 

                 { split: true, initialSize: 100 }, 

            center:

                 { }

         });

 这是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设置一下初始尺寸，并最迟定义中间区域。本例中， BorderLayout被绑定到"document.body"这个DOM元素，其实BorderLayout还可以绑定到任何一个封闭的DOM元素。定义好BorderLayout之后，我们加入ContentPanel对象（基于本例）。

          mainLayout.beginUpdate(); 

           mainLayout.add('north', 

                      new Ext.ContentPanel('north-div',

                            { fitToFrame: true, closable: false })

                  );

          mainLayout.add('south', 

                 new Ext.ContentPanel('south-div',

                        { fitToFrame: true, closable: false })

               ); 

        mainLayout.add('east', 

                 new Ext.ContentPanel('east-div', 

                      { fitToFrame: true, closable: false })

           ); 

        mainLayout.add('west',

                 new Ext.ContentPanel('west-div', 

                    { fitToFrame: true, closable: false })

        ); 

        mainLayout.add('center', 

                new Ext.ContentPanel('center-div', 

                  { fitToFrame: true })

     );

     mainLayout.endUpdate();

 当前的例子是将ContentPanel加入到所有区域中。由调用mainLayout.beginUpdate()开始。beginUpdate ()告诉BorderLayout对象在执行endUpate()方法之前，先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。执行beginUpdate()之后，加入五个ContentPanel对象到区域。所有的 ContentPanel对象（除中间的那个外），都设置是可关闭的（closbale）。所有的ContentPanel对象也都设置为自动适配它们的父元素。最后执行endUpdate()渲染layout。