如何在高度为100％的HTML正文上设置Grid ExtJS

Question

I'm using ExtJS Grid to show my data. 我正在使用ExtJS Grid来显示我的数据。
Actually I want to show my grid with fully view from the start. 实际上，我想从一开始就以完整的视图显示网格。
But I don't know how to set height into fully view. 但是我不知道如何将高度设置为完全可见。 I only can set the height with pixel (eg 600px,1024px, etc) 我只能用像素设置高度（例如600px，1024px等）

here is my html code 这是我的HTML代码

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

here is my some ExtJS code 这是我的一些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()
});

so how to set my ExtJS and HTML code to show fully height view ExtJS from my browser. 因此如何设置我的ExtJS和HTML代码以从浏览器显示全高视图ExtJS。

Thanks in advance. 提前致谢。

Answer 1

You need to create a ViewPort with a fit layout and put your grid in it: 您需要创建一个具有合适布局的ViewPort并将网格放入其中：

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

如何在高度为100％的HTML正文上设置Grid ExtJS

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-07-30 09:53:26

如何在高度为100％的HTML正文上设置Grid ExtJS

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-07-30 09:53:26

解决方案1
1 已采纳 2013-07-30 09:53:26