2010-02-23 2 views
1

Как изменить размер панели сетки в зависимости от размера окна. Я дал viewconfig { forcefit:true }, но в сетке интернет-проводника сетка не масштабируется с размером окна.grid resize 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'); 

}); 

ответ

0

В forcefit: истинный бит применяется только в случае, если сетка находится внутри другого контейнера, я считаю.

Если у вас есть свободная плавающая сетка, и она не управляется менеджером макета Ext, я думаю, вам нужно указать размер.

Самое простое исправление, вероятно, для того, чтобы указать ViewPort или Border Layout на один уровень выше сетки, а затем указать параметр forceFit.

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 будет управлять телом браузера.

+0

Я дал видовое окно для сетки и прокомментировал строку grid.render, но сетка не отображается на веб-странице. мой код находится на странице ascx, где я дал javascript в теге скрипта. вы упомянули тег тела для маркировки, и я получаю эту часть. Не могли бы вы объяснить мне. – xrx215

+0

Вот минимальная полная страница html Ext JS Viewport, которую вы можете использовать со своей сетью: http://gist.github.com/313826 –

+0

спасибо Я посмотрю на нее и попытаюсь ее решить. – xrx215