1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default Displaying a grid panel in a div using vbox layout

    Displaying a grid panel in a div using vbox layout


    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,

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    Code:
    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




    Code:
    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

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    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/

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi