后来我使用Sencha ExtJS 4.2和CSS参数“x-grid-table”来显示屏幕上的所有网格行而没有任何滚动组件。 示例(小提琴):https://fiddle.sencha.com/#view/editor&fiddle/2hld
.custom-grid .x-grid-table {
height: 100%;
width: 100%;
padding:0;
margin:0;
}
更新到Sencha ExtJS 6.5.3后,我发现CSS“x-grid-table”不可用,因为现在每个网格行都是一个不同的表。 示例未完整工作:https://fiddle.sencha.com/#view/editor&fiddle/2hl8
我尝试使用
.custom-grid .x-grid-row {
height: 90px !important;
}
它正在工作,但在那种情况下我将行高设置为常量。但目标是在任何屏幕分辨率上查看完整网格。
我该如何解决这个问题?
谢谢!
答案 0 :(得分:1)
我认为我用这个CSS实现了你想要的东西,我没有进行大量测试,看看是否制动了任何网格功能:(为了更好地测试它,在你的小提琴中,把一个固定的高度放在网格):
.custom-grid .minor {
background: green;
}
.custom-grid .adult {
background: yellow;
}
.custom-grid .x-grid-cell-inner {
text-align: center !important;
}
.custom-grid .x-grid-cell {
vertical-align : middle !important;
}
.custom-grid .x-grid-item > tbody {
height:100% !important;
display: inline-table;
}
.custom-grid .x-grid-item {
width:100% !important;
display:block !important;
flex:1;
-moz-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
}
.custom-grid .x-grid-item-container{
height:100%;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}