Displaying a grid panel in a div using vbox layout

[harjits]

Hi there,

I have a grid and when I use a Panel and define the layout on the panel as vbox and align tretch I see that all the columns in the grid are sized properly.

For some reasons I cannot use the panel and I'm using a div now to render the grid. How can I achieve the same results ?


Thanks,

[willigogs]

Can you provide a code example of what you're trying to achieve?

[harjits]

sentry.ResultPanel = Ext.extend(Ext.Panel, {
    id:'resultContainer',
    frame:false,
    autoScroll:true,
    layout:{
        type:'vbox',
        align:'stretch'
    },
    initComponent:function () {


        //console.log(sentry)
        sentry.sentryQueryForm.tcResultGrid = new TcResultsGrid(sentry.sentryQueryForm);


        //console.log(sentry.sentryQueryForm.tcResultGrid);
        var config = {
            items:[sentry.sentryQueryForm.tcResultGrid.gridPanel]
        };




        Ext.apply(this, config);
        sentry.ResultPanel.superclass.initComponent.apply(this, arguments);
    }
});

this panel was being added to a view port.


Now the approach is as follows

sentry.sentryQueryForm.tcResultGrid = new TcResultsGrid(sentry.sentryQueryForm);

sentry.sentryQueryForm.tcResultGrid.gridPanel.render('g3')

using this approach, the grid is not stretched out. All the columsn do appear but they are squished. Here is how the grid is defined

this.gridPanel = new Ext.grid.GridPanel({


        id : 'TollCallView',
        title: 'Toll Call',
        autoScroll:true,
        stripeRows : true,
        margins : '0',
        cls:'mygrid',
        loadMask:true,
        layout:{
            type:'vbox',
            align:'stretch'
        },
        forceFit:true,
        height:200,
        columnLines : true,
        stateful:true,
        stateId:'TollCallView',
        store : parent.store,
        cm : new Ext.grid.ColumnModel({
            columns : [{
                header : 'Toll Call ID',
                width : 200,
                dataIndex : 'tollCallID'
            },  {
                header : 'Source Entity ID',
                width : 200,
                dataIndex : 'sEntityID'
            }, {
                header : 'Source Group ID',
                width : 200,
                dataIndex : 'sGroupID'
            },
                {
                    header : 'Source Name',
                    width : 200,
                    dataIndex : 'sourceName'
                },
                {
                    header : 'Source Group Name',
                    width : 200,
                    dataIndex : 'sGroupName'
                },
                {
                    header : 'Source Phone Number',
                    width : 200,
                    dataIndex : 'sourcePhoneNumber'
                },
                {
                    header : 'Source IMSI',
                    width : 200,
                    dataIndex : 'sIMSI'
                },
                {
                    header : ' Source IMEI',
                    width : 200,
                    dataIndex : 'sIMEI'
                },
                {
                    header : ' Source Device Type',
                    width : 200,
                    dataIndex : 'sourceDeviceType'
                },
                {
                    header : ' Source Target',
                    width : 200,
                    dataIndex : 'sTarget'
                },
                {
                    header : 'Dest Entity ID',
                    width : 200,
                    dataIndex : 'destEntityID'
                }
                ,
                {
                    header : 'Dest Group ID',
                    width : 200,
                    dataIndex : 'destGroupID'
                },
                {
                    header : 'Dest Name',
                    width : 200,
                    dataIndex : 'destName'
                } ,
                {
                    header : 'Dest Group Name',
                    width : 200,
                    dataIndex : 'destGroupName'
                },
                {
                    header : 'Dest Phone Number',
                    width : 200,
                    dataIndex : 'destPhone'
                },
                {
                    header : 'Dest IMSI',
                    width : 200,
                    dataIndex : 'destIMSI'
                },
                {
                    header : 'Dest IMEI',
                    width : 200,
                    dataIndex : 'destIMEI'
                },
                {
                    header : ' Dest Device Type',
                    width : 200,
                    dataIndex : 'destDeviceType'
                },
                {
                    header : 'Dest Target',
                    width : 200,
                    dataIndex : 'destTarget'
                },
                {
                    header : 'Toll Call Duration',
                    width : 200,
                    dataIndex : 'tollCallDuration'
                },
                {
                    header : 'Date Time Local',
                    width : 200,
                    dataIndex : 'dateTimeLocal'
                }






            ],
            defaults : {
                sortable : true
            }
        }),


        view: new Ext.grid.GroupingView({
            forceFit:true


        }),
        sm : new Ext.grid.RowSelectionModel({
            singleSelect : true


        }),


        trackMouseOver : true ,
        bbar : parent.pager

[willigogs]

If your container panel only has one child item, then there really is no need for you to be using a VBOX layout.

Try using layout:'fit' for both the panel and grid instead.

Also remove all your widths from your columns - you're using forceFit:true, therefore these are superfluous.

[harjits]

I'm not using the pnel, I'm just using the grid and rendering to a div. If I use layout:fit on the grid. I don't see scrollbar in the div

[willigogs]

If you're just rendering the gridpanel to a div, then you can probably lose a lot of your config options.

Here's a simple example of a grid rendered into a DIV:
http://jsfiddle.net/Whinters/gLqwu/