html - 如何在 100% 高度的 HTML 正文上设置 Grid ExtJS

标签 html css extjs grid height


我正在使用 ExtJS Grid 来显示我的数据。
实际上我想从一开始就以完整的 View 显示我的网格。
但是我不知道如何将高度设置为完全可见。我只能用像素设置高度(例如 600px、1024px 等)

这是我的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 代码以从我的浏览器显示全高度 View ExtJS。

提前致谢。

最佳答案

您需要创建一个 ViewPortfit layout并将您的网格放入其中:

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

关于html - 如何在 100% 高度的 HTML 正文上设置 Grid ExtJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17942905/

相关文章:

java - HTML 中的 Swing 组件

css - 右侧 div 的内联 block 似乎没有生效

javascript - 如何使div平滑移动?

javascript - window.open 的替代方法

extjs - appProperty 属性有何用途?

javascript - 是否可以在 Ext JS 中将一个 xtype 附加到另一个 xtype

html - Swift Webview UIButton 交互

javascript - 未捕获的 TypeError : $(. ..).datagrid 不是函数

html - 为什么 margin 不自己合并

jquery - 是否有任何 jQuery 插件可以提供与 www.squarespace.com 菜单类似的结果?