ExtJS: grid 100% height

Question

I have a structure of this type (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]
    }]
});

In the toolbar, I have two buttons, COURSES and EXAMS. I use these buttons to show/hide one of the two grid, so that only one is visible at a time. The code of the buttons I uses is something like this:

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

The question is: how can I have the the displayed grid to fill the whole screen (especially in height?). I think I have to put something in the handler of the buttons or a listener to my grids, but I do not know what to put. Any hints?

Answer 1

The 'fit' layout is only for placing a single panel. Use the 'card' layout instead for switching between two or more panels which are to share the same space:

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

Your button handlers then become:

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

Also, assuming the toolbar variable in your example is containing a real Ext.Toolbar instance, your layout in general could be improved with a different viewport definition:

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

That said, if you still need a border layout on your viewport for other reasons then the card panel, toolbar and all, can be parked in the center region as shown at the top of the answer.

Answer 2

The fit Layout only supports one element otherwise it want work. You will need to wrap it all up.

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