ExtJs Grid in TabPanel auto Fit issue

Question

I am having problems redering an grid in a a tab panel (Its made with Ext Designer.). the hierarchy is as follows , Viewport. -> tabPanel -> Panel -> Container -> Grid.

This is how its displayed now how its displayed now.

Here is the code for viewport

mainWindowUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'mainWindow',
initComponent: function() {
    this.items = [
        {
            xtype: 'panel',
            title: 'Navigation',
            region: 'west',
            width: 200,
            frame: true,
            split: true,
            titleCollapse: true,
            collapsible: true,
            id: 'navigation',
            items: [
                {
                    flex: 1,
                    xtype: 'mytreepanel'
                }
            ]
        },
        {
            xtype: 'tabpanel',
            layoutOnTabChange: true,
            resizeTabs: true,
            defaults: {
                layout: 'fit',
                autoScroll: true
            },
            region: 'center',
            tpl: '',
            id: 'mainTabPanel',
            layoutConfig: {
                deferredRender: true
            }
        }
    ];
    mainWindowUi.superclass.initComponent.call(this);
}
});

here is the code to create the tab.. (created from a nav panel programmatically)

var currentTab = tabPanel.findById(node.id);
            // If not yet created, create the tab
            if (!currentTab){
                currentTab = tabPanel.add({
                    title:node.id,
                    id:node.id,
                    closable:true,
                    items:[{
                        xtype: 'phasePanel',
                        layout: 'fit',
                        autoscroll: true,
                        }],
                        autoScroll:true,

                });
            }
            // Activate tab
            tabPanel.setActiveTab(currentTab);

here is the code for the panel/container/grid

PhasePanelUi = Ext.extend(Ext.Panel, {
frame: true,
layout: 'anchor',
autoScroll: true,
autoWidth: true,
defaults: '',
initComponent: function() {
    this.items = [
        {
            xtype: 'container',
            autoScroll: true,
            layout: 'fit',
            defaults: {
                layout: 'fit',
                autoScroll: true
            },
            id: 'gridHolder',
            items: [
                {
                    xtype: 'grid',
                    title: 'Current Phases',
                    store: 'PhaseStore',
                    autoDestroy: false,
                    viewConfig: '',
                    deferRowRender: false,
                    autoLoad: '',
                    ref: '../phaseGrid',
                    id: 'phaseGrid',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            header: 'Name',
                            dataIndex: 'name',
                            sortable: true,
                            width: 200
                        },
                        {
                            xtype: 'gridcolumn',
                            header: 'Estate',
                            dataIndex: 'estate_name',
                            sortable: true,
                            width: 500
                        }
                    ]
                }
            ]
        }
    ];
    PhasePanelUi.superclass.initComponent.call(this);
}
});

i have tried all sorts of combinations. but just cant get the grid to render correctly any sort of assistance will be appreciated.

are you referring to the grid not filling the height correctly? — JamesHalsall
yea. it works if i set the height property but i need to 'fit' so it would be filled on all screen resolutions — Jinah Adam
Code looks fine... But in image is some misunderstanding: from where appears fieldset (with title "Basic Information") ? — Zango
i remove the basic information part from the code when i showed it here. i thought it was not relavant to the issue. — Jinah Adam

Johnathan Hebert Johnathan Hebert · Accepted Answer · 2011-02-23T05:54:29

Your currentTab needs a layout of 'fit' also... you gave the phasePanel a layout of 'fit' and the container within the phasePanel a layout of 'fit', but you did not give the currentTab a layout of 'fit'...

The layout refers to how child items will be laid out within a container... and not how an item will fit into its container. So if you want an item to fit to its container, set layout:'fit' on the container, not the item.

ExtJs Grid in TabPanel auto Fit issue

3 Answers