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] 
        } 
       ] 
      } 
     ] 
    }] 
});