ExtJS 6.5.3 设置网格行高度以适合屏幕上的所有行

Question

后来我使用 Sencha ExtJS 4.2 和 CSS 参数 "x-grid-table" 在屏幕上显示所有网格行，没有任何滚动组件。示例 (fiddle)：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" 不可用，因为现在每个网格行都是不同的 table。示例未完全正常工作：https://fiddle.sencha.com/#view/editor&fiddle/2hl8

我尝试使用

.custom-grid .x-grid-row {
  height: 90px !important;
}

它正在工作，但在那种情况下，我将行高设置为常量。但目标是在任何屏幕分辨率下查看完整网格。

我该如何解决这个问题？

谢谢！

Answer 1

我想我用这个 CSS 实现了你想要的，但我没有做广泛的测试来查看是否制动任何网格功能：（为了更好地测试它，在你的 fiddle, 在网格上放一个固定的高度 ):

.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;
}

ExtJS 6.5.3 设置网格行高度以适合屏幕上的所有行

ExtJS 6.5.3 Set grid rows height to fit all of them on screen

css

extjs

extjs6-classic