如何在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

回答

相关问题