ExtJS先进的流体边界布局

Question

我需要为我们的报告系统创建一个先进的，流畅的边界布局。

西面窗格将被拆分成2个独立的窗格，顶部用于过滤窗体，底部用于导航。

中心窗格将被拆分为3个独立的窗格，顶部为主数据网格，2个底部窗格为子报表网格。我可能在某个时候需要3个底部窗格，但我希望避免这种情况。

这里是我所期待的一个例子：http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png

我到目前为止肯定是不尽如人意。

http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png

下面是代码：

var ReportForm = new Ext.FormPanel({ 
    url:   '', 
    frame:   false, 
    border:   false, 
    title:   'Filter Results', 
    width:   260, 
    labelWidth:  50, 
    padding:  '10 0 0 5', 
    standardSubmit: true, 
    items:   [ 
         { 
          fieldLabel:  'Client',      
          hiddenName:  'ClientID', 
          mode:   'local', 
          store:   frmClientStore, 
          displayField: 'CompanyName', 
          valueField:  'ClientID', 
          width:   150, 
          editable:  true, 
          triggerAction: 'all', 
          xtype:   'combo' 
         } 

    ], 
    buttons:  [ 
         {text:'Export',handler:function(){}}, 
         {text:'Search',handler:function(){}}, 
         {text:'Reset',handler:function(){}} 
    ] 
}); 

var ReportGrid = new Ext.grid.GridPanel({ 
    id:     'ReportGrid', 
    width:    '100%', 
    height:    '50%', 
    viewConfig:   { 
          forceFit:  true 
    }, 
    autoHeight:   true, 
    loadMask:   true, 
    stripeRows:   true, 
    store:    ReportStore, 
    margins:   '5 5 5 5', 
    cm:     ReportColumnModel 
    ,bbar:    new Ext.PagingToolbar 
         (
          { 
           pageSize:  10, 
           store:   ReportStore, 
           displayInfo: true, 
           displayMsg:  'Displaying results {0} - {1} of {2}' 
          } 
         ) 

}); 

var viewport = new Ext.Viewport({ 
    layout:   'border', 
    items:   [ 
         { 
          region:    'west', 
          layout:    'vbox', 
          layoutConfig:  { 
                align:  'stretch' 
          }, 
          width:    260, 
          minSize:   175, 
          maxSize:   400, 
          margins:   '5 5 5 5', 
          items:    [ 
                ReportForm, 
                { 
                 region:  'south', 
                 title:  'Superuser', 
                 border:  false, 
                 xtype:  'tabpanel', 
                 activeTab: 0, 
                 items:  [ 
                     { 
                      title:  'General', 
                      xtype:  'panel', 
                      height:  200, 
                      html:  '', 
                     }, 
                     { 
                      title:  'Exams', 
                      height:  200, 
                      html:  '' 
                     } 
                    ] 
                } 
               ] 
         }, 
         new Ext.Panel({ 
          region:    'center', 
          deferredRender:  false, 
          layout:    'fit', 
          margins:   '5 5 5 0', 
          items:    [ 
                ReportGrid, 
                new Ext.Panel({ 
                 region:  'south', 
                 border:  false, 
                 height:  '50%', 
                 html:  'foo', 
                 layout:  'fit', 
                 items:  [ 
                     new Ext.Panel({ 
                      region:  'west', 
                      width:  '50%', 
                      border:  false, 
                      html:  'West' 
                     }), 
                     new Ext.Panel({ 
                      region:  'east', 
                      width:  '50%', 
                      border:  false, 
                      html:  'East' 
                     }) 
                    ] 
                }) 
               ] 
         }) 
        ] 
}); 

谢谢...

编辑：

非常感谢AMOL下面的答案。我还有一个问题。如果我在西部地区折叠表格，我该如何调整导航面板以填充剩余空间？

Answer 1

码 -

var ReportForm = new Ext.FormPanel({ 
     url:   '', 
     frame:   false, 
     border:   false, 
     title:   'Filter Results', 
     width:   260, 
     labelWidth:  50, 
     padding:  '10 0 0 5', 
     standardSubmit: true, 
     items:   [ 
          { 
           fieldLabel:  'Client',      
           hiddenName:  'ClientID', 
           mode:   'local', 
           //store:   frmClientStore, 
           displayField: 'CompanyName', 
           valueField:  'ClientID', 
           width:   150, 
           editable:  true, 
           triggerAction: 'all', 
           xtype:   'combo' 
          } 

     ], 
     buttons:  [ 
          {text:'Export',handler:function(){}}, 
          {text:'Search',handler:function(){}}, 
          {text:'Reset',handler:function(){}} 
     ] 
    }); 

    var ReportGrid = new Ext.grid.GridPanel({ 
     id:     'ReportGrid', 
     flex:1, 
     viewConfig:   { 
           forceFit:  true 
     }, 
     loadMask:   true, 
     stripeRows:   true, 
     //store:    ReportStore, 
     margins:   '5 5 5 5', 
     cm:     new Ext.grid.ColumnModel({ 
      columns:[ 
        {header:'A column', dataIndex:'afield'}, 
        {header:'B column', dataIndex:'bfield'} 
      ] 
     }), 
     store:new Ext.data.ArrayStore({ 
      autoLoad:true, 
      fields:['afield', 'bfield'], 
      data:[['value 1','value 3'],['value 2', 'value4']] 
     }), 
     bbar:    new Ext.PagingToolbar 
          (
           { 
            pageSize:  10, 
            //store:   ReportStore, 
            displayInfo: true, 
            displayMsg:  'Displaying results {0} - {1} of {2}' 
           } 
          ) 

    }); 

    var viewport = new Ext.Viewport({ 
     layout:   'border', 
     items:   [ 
          { 
           region:    'west', 
           layout:    'vbox', 
           layoutConfig:  { 
                 align:  'stretch' 
           }, 
           width:    260, 
           minSize:   175, 
           maxSize:   400, 
           margins:   '5 5 5 5', 
           items:    [ 
                 ReportForm, 
                 { 
                  region:  'south', 
                  title:  'Superuser', 
                  border:  false, 
                  xtype:  'tabpanel', 
                  activeTab: 0, 
                  items:  [ 
                      { 
                       title:  'General', 
                       xtype:  'panel', 
                       height:  200, 
                       html:  '' 
                      }, 
                      { 
                       title:  'Exams', 
                       height:  200, 
                       html:  '' 
                      } 
                     ] 
                 } 
                ] 
          }, 
          new Ext.Panel({ 
           region:    'center', 
           deferredRender:  false, 
           layout:    'vbox', 
           layoutConfig:{align:'stretch'}, 
           margins:   '5 5 5 0', 
           items:    [ 
                 ReportGrid, 
                 { 
                  border:  false, 
                  flex:1, 
                  layout:  'hbox', 
                  layoutConfig:{align:'stretch'}, 
                  defaults:{flex:1}, 
                  items:  [ 
                      new Ext.Panel({ 
                       html:  'West' 
                      }), 
                      new Ext.Panel({ 
                       html:  'East' 
                      }) 
                     ] 
                 } 
                ] 
          }) 
         ] 
    });