tags:

views:

475

answers:

2

How do i resize the grid panel accoring to the window size. I have given viewconfig{ forcefit:true} but in internet explorer grid panel does not scale with the window size.

Please help me in this issue

var grid = new Ext.grid.GridPanel({

store: store,

colModel: colModel,

view: gv,

stateId: 'myGridid',

stateful: true,

plugins: [filters],

autoHeight: true,

stripeRows: true,

id: 'my-grid',

title: xppo.st('SDE_PRINTERS'),

viewConfig: { forceFit: true },

tbar: tb,

listeners: {

                cellclick: function(grid, rowIndex, colIndex, e) {
                    colClicked = colIndex;
                    if (colClicked != 0) {
                        if (grid.getColumnModel().getDataIndex(grid.getColumnModel().getColumnId(colIndex)) == 'Incident') {

                            return;
                        }
                    }


                    if (colClicked != 0) {
                        var record = grid.getStore().getAt(rowIndex);
                        var paramInScope = record.get("InScope");
                        var paramAssetID = record.get("AssetID");

                        if (paramInScope == 'Yes') {
                            OpenPrinterDetailsPopup(paramAssetID, 800, 600);
                        }
                        else {
                            OpenPrinterDetailsPopup(paramAssetID, 300, 200);
                        }
                    }

                },

                rowdblclick: function(grid, rowIndex, columnIndex, e) {
                    if (colClicked != 0) {
                        var record = grid.getStore().getAt(rowIndex);
                        var paramInScope = record.get("InScope");
                        var paramAssetID = record.get("AssetID");

                        if (record == null) {
                            return;
                        }

                        if (paramInScope == 'Yes') {
                            OpenPrinterDetailsPopup(paramAssetID, 800, 600);
                        }
                        else {
                            OpenPrinterDetailsPopup(paramAssetID, 300, 200);
                        }
                    }
                },
                expandedFilter: function() {
                    Ext.getCmp('my-grid').setWidth(860);
                }
                ,
                collapsedFilter: function() {
                    Ext.getCmp('my-grid').setWidth(1060);
                }
            }
        });

        var userHidden = false;
        if (showColumn) {
            grid.getColumnModel().setHidden(23, false);
        }
        else {
            grid.getColumnModel().setHidden(23, true);
        }


        if (fl1) {
            grid.getColumnModel().setHidden(3, fl1);
        }
        else {
            grid.getColumnModel().setHidden(3, flags1);
        }


          grid.getStore().reload();






        grid.render('grid-example');

    });
A: 

The forcefit:true bit only applies if the grid is inside of another container, I believe.

If you just have a free floating grid and it isn't being managed by the Ext Layout manager, I think you need to specify a size.

Easiest fix is probably to specify a ViewPort or Border Layout one level above the grid, and then specify the forceFit option.

Jason
A: 

If you want any component to take up the entire browser window and resize with it, use a Viewport and set layout to fit.

Ext.onReady(function(){
  // ...your grid code...
  //grid.render('grid-example');  <- do not render the grid, the viewport will do this for you
  var viewport = new Ext.Viewport({
    layout: 'fit',
    items: [grid]
  });
});

Note that your markup should now be <body></body>, since the Viewport will be managing the browser body.

Jonathan Julian
i had given viewport for the grid and commented the line grid.render but grid is not displayed on the web page. my code is in ascx page where i had given the javascript in script tag. you have mentioned body tag for the mark up i dint get that part .can you please explain me.
xrx215
Here is a minimal Ext JS Viewport complete html page that you can use with your grid: http://gist.github.com/313826
Jonathan Julian
thank youi wil look at it and try to solve it.
xrx215