viewport with vbox layout

[adeelmahmood]

I am trying to show a grid on a page with a toolbar immediately below the grid but I dont want to use the dockedItems .. instead i want to add a second component (toolbar) to the viewport and have that show up after the grid .. so i am using vbox layout but for some reason if i set the grid to forceFit: true then the grid disappears and only the bottom toolbar shows up .. but if i remove the forceFit:true then both show up but obviously the grid is not taking the full space available on the page ..

[friend]

It sounds like a fairly simple layout issue, but it's hard to say without seeing your code. Can you post a concise code sample which includes your Viewport/Grid/Toolbar layout?

Thx.

[scottmartin]

I put this together real quick in Sencha Architect:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        align: 'stretch',
        type: 'vbox'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    flex: 1,
                    title: 'My Grid Panel',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            text: 'Number'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Date'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Boolean'
                        }
                    ],
                    viewConfig: {

                    }
                },
                {
                    xtype: 'toolbar',
                    items: [
                        {
                            xtype: 'button',
                            text: 'MyButton'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Ext.create('MyApp.view.MyViewport', {});

Scott.