javascript - ExtJs Grid in TabPanel auto Fit issue - Stack Overflow

admin管理员组

文章数量:1306750

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

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 binations. but just cant get the grid to render correctly any sort of assistance will be appreciated.

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

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 binations. but just cant get the grid to render correctly any sort of assistance will be appreciated.

• javascript
• extjs

Share Improve this question Follow asked Feb 21, 2011 at 7:18 Jinah AdamJinah Adam 1,12522 gold badges1414 silver badges2727 bronze badges 4

• 1 are you referring to the grid not filling the height correctly? – JamesHalsall Commented Feb 21, 2011 at 8:54
• 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 Commented Feb 21, 2011 at 9:14
• Code looks fine... But in image is some misunderstanding: from where appears fieldset (with title "Basic Information") ? – Zango Commented Feb 23, 2011 at 6:13
• 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 Commented Feb 24, 2011 at 6:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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.

You must set in the grid autoHeight: true

                    xtype: 'grid',
                    title: 'Current Phases',
                    autoHeight: true,
                    store: 'PhaseStore',
                    autoDestroy: false,
                    viewConfig: '',
                    deferRowRender: false,
                    autoLoad: '',
                    ref: '../phaseGrid',
                    id: 'phaseGrid',

And you can set in gridView the autoFill and forceFit attributes.

i seem to have solved the issue.

i removed the layout bit pletely from the dynamic tab. i guess now it just picks the layout from the defaults. (still peculiar behavior :S)

本文标签： javascriptExtJs Grid in TabPanel auto Fit issueStack Overflow