ExtJS：网格 100% 高度

Question

我有这种类型的结构（Ext 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

fit Layout 只支持一个元素，否则它需要工作。你需要把它包起来。

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

Answer 2

“适合”布局仅用于放置单个面板。使用“卡片”布局在两个或多个共享相同空间的面板之间切换：

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

另外，假设您的示例中的 toolbar 变量包含一个真实的 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
        ]
    }
});

也就是说，如果由于其他原因您仍需要在视口上进行边框布局，那么卡片面板、工具栏和所有内容都可以停在中心区域，如答案顶部所示。