如何在100％身高的HTML正文上設置Grid ExtJS

我正在使用ExtJS Grid來顯示我的數據。
其實我想從一開始就展示我的網格。
但我不知道如何將高度設置爲完全視圖。我只可以設定像素（例如600px的，1,024像素等）的高度
如何在100％身高的HTML正文上設置Grid ExtJS

這裏是我的html代碼

<body style="background-color:#D9F4FF;height:600px"></body>

這裏是我的一些ExtJS的代碼

var grid = Ext.create('Ext.grid.Panel', { 
    title: 'Export Report', 
    border: false, 
    flex:1, 
    store: store, 
    columns: [ 
      { header: "No.", xtype: 'rownumberer', width: 50, align: 'center' }, 
      { id: 'hawb', header: "HAWB", dataIndex: 'hawb', locked : true, width: 80, sortable: true, align: 'center'}, 
      { id: 'mawb', header: "MAWB", dataIndex: 'mawb', locked : true, width: 150, sortable: true, align: 'center'} 
     ], 
    loadMask: true, 
    layout: 'border', 
    height: '100%', 
    width: '100%', 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: store, // same store GridPanel is using 
     dock: 'bottom', 
     displayInfo: true, 
     items:[{ 
      itemId: 'filter', 
      text: 'Filter', 
      handler: function(){ 
       winFilter.show(); 
      }}] 
    }], 
    renderTo: Ext.getBody() 
});

所以如何將我的ExtJS和HTML代碼設置爲從瀏覽器中顯示完整高度的ExtJS視圖。

在此先感謝。

來源

2013-07-30 user1875301

你需要創建一個fit layout一個ViewPort，把你的網格，它：

Ext.widget('viewport', { 
    layout: 'fit' 
    ,items: [{ 
     xtype: 'grid' 
     // ... your grid config 
    }] 
});

來源

2013-07-30 09:53:26 rixo

或者您可以使用另一種佈局，像'hbox'或'border'，如果你不想讓你的網格還要佔據視口寬度的100％。 – rixo

Hi rixo，謝謝你的好意。是工作！ – user1875301

如何在100％身高的HTML正文上設置Grid ExtJS

回答

相關問題