如何在HTML主体上设置网格ExtJS,高度为100%
16lz
2021-01-22
I'm using ExtJS Grid to show my data.
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 (e.g. 600px,1024px, etc)
我正在使用ExtJS Grid来显示我的数据。实际上我想从一开始就全面展示我的网格。但我不知道如何将高度设置为完全视图。我只能用像素设置高度(例如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.
提前致谢。
1 个解决方案
#1
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
}]
});
更多相关文章
- 让列在3列CSS布局中扩展到相同的高度?
- 纯CSS最小化高度标题,绝对定位DIV内最大化身高
- 如何定义两个日期之间的Kendo网格列过滤器?
- CSS Transition div容器高度从100%到200%
- 保持子div的宽高比与父级的高度和宽度变化
- 自动设置绝对子级的父div的高度
- 浮动到页面底部的可变高度页脚的CSS(不是视口)
- 100%高度分区内显示:表格单元分区
- JQuery基于元素的高度添加类