grid resize issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-21 13:47 出处：网络

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

相关专题：extjs

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 : t开发者_StackOverflowrue,    
  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');

});

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.

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.