ExtJS的：網格100％的高度

Question

予有這種類型的結構（內線3.3.1）：

var page = new Ext.Viewport({ 
    layout: 'border', 
    anchor:'100% 100%', 
    renderTo: Ext.getBody(), 
    items: [{ 
     region: 'north', 
     height:'auto', 
     items: [toolbar] 
    },{ 
     region: 'center', 
     layout:'fit', 
     items: [gridCourses,gridExams] 
    }] 
}); 

在工具欄，我有兩個按鈕，課程和考試。我使用這些按鈕來顯示/隱藏兩個網格中的一個，這樣一次只能看到一個。我使用的按鈕的代碼是這樣的：

{ 
    text: 'Courses', 
    iconCls: 'show-courses', 
    handler: function(){ 
     gridCourses.store.reload(); 
     gridCourses.show(); 
     gridExams.hide(); 
    } 
},{ 
    text: 'Exams', 
    iconCls: 'show-exams', 
    handler: function(){ 
     gridExams.store.reload(); 
     gridCourses.hide(); 
     gridExams.show(); 
    } 
} 

的問題是：（？尤其是在高）我怎麼會有顯示的網格來填滿整個屏幕。我想我必須把東西放在按鈕的處理程序或聽衆的網格中，但我不知道該放什麼。任何提示？

Answer 1

「適合」佈局僅適用於放置單個面板。使用「卡」的佈局，而不是兩個或兩個以上的面板之間切換它們共享同一個空間：

{ 
    region: 'center', 
    layout: 'card', 
    // 0 here means the zeroth element of the items array. 
    activeItem: 0, 
    items: [ 
     gridCourses, 
     gridExams 
    ] 
} 

你的按鈕處理則成爲：

{ 
    text: 'Courses', 
    iconCls: 'show-courses', 
    handler: function() { 
     gridCourses.getStore().reload(); 
     gridCourses.ownerCt.getLayout().setActiveItem(gridCourses); 
    } 
}, 
{ 
    text: 'Exams', 
    iconCls: 'show-exams', 
    handler: function() { 
     gridExams.getStore().reload(); 
     gridExams.ownerCt.getLayout().setActiveItem(gridExams); 
    } 
} 

而且，假設工具欄變量在你的例子中包含一個真實的Ext.Toolbar實例，你的佈局一般可以用不同的視口定義來改進：

new Ext.Viewport({ 
    layout: 'fit', 
    items: { 
     xtype: 'panel', 
     layout: 'card', 
     activeItem: 0, 
     tbar: [ 
      { 
       text: 'Courses', 
       iconCls: 'show-courses', 
       handler: function() { 
        gridCourses.getStore().reload(); 
        gridCourses.ownerCt.getLayout().setActiveItem(gridCourses); 
       } 
      }, 
      { 
       text: 'Exams', 
       iconCls: 'show-exams', 
       handler: function() { 
        gridExams.getStore().reload(); 
        gridExams.ownerCt.getLayout().setActiveItem(gridExams); 
       } 
      } 
     ], 
     items: [ 
      gridCourses, 
      gridExams 
     ] 
    } 
}); 

也就是說，如果由於其他原因您的視口仍然需要邊框佈局，那麼可以將卡面板，工具欄和全部卡片放置在中心區域，如答案的頂部所示。

Answer 2

合適的佈局只支持一個元素，否則它想要工作。你需要把它包起來。

var page = new Ext.Viewport({ 
    layout: 'border', 
    // anchor:'100% 100%', <- I don't think you need this, cause the Viewport is alsways bound to the fullscreen 
    // renderTo: Ext.getBody(), <- Same here. The viewport is alsways rendered to the body 
    items: [{ 
     region: 'north', 
     height:'auto', 
     items: [toolbar] 
    },{ 
     region: 'center', 
     layout:'fit', 
     items: [ 
      { 
       xtype: 'container', 
       items: [ 
        { 
         xtype: 'container' 
         layout: 'fit', 
         items: [Grid1] 
        }, 
        { 
         xtype: 'container' 
         layout: 'fit', 
         items: [Grid1] 
        } 
       ] 
      } 
     ] 
    }] 
});