Question

如何根据窗口大小调整网格面板的大小。我给了 viewconfig { forcefit:true }但在Internet Explorer网格面板中无法扩展窗口大小。

请在这个问题上帮助我：

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');

});

Answer 1

如果您希望任何组件占用整个浏览器窗口并使用它调整大小，请使用Viewport并将布局设置为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]
  });
});

请注意，您的标记现在应为<body></body>，因为Viewport将管理浏览器正文。

Answer 2

forcefit：true bit仅适用于网格在另一个容器内的情况，我相信。

如果你只有一个免费的浮动网格并且它没有由Ext Layout管理器管理，我认为你需要指定一个大小。

最简单的修复可能是在网格上方一级指定ViewPort或Border Layout，然后指定forceFit选项。

网格调整大小问题

2 个答案: