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

0
votes

Later i was using Sencha ExtJS 4.2 and CSS parameter "x-grid-table" for showing all grid rows on screen without any scrolling components. Example (fiddle): https://fiddle.sencha.com/#view/editor&fiddle/2hld

.custom-grid .x-grid-table {
  height: 100%;
  width: 100%;
  padding:0;
  margin:0;
}

After update to Sencha ExtJS 6.5.3 i founded that CSS "x-grid-table" is unavailable because every grid row now is a different table. Example not full working: https://fiddle.sencha.com/#view/editor&fiddle/2hl8

I tried to use

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

It is working, but in that case i'm setting row height as constant. But the target is to view full grid on any screen resolution.

How can i fix this problem?

Thank You!

1
cssextjsextjs6-classic
You can port a few hundred lines of code from the 4.x TableView to a custom 6.x TableView to get the old behaviour back. I did that some time ago because I needed the rowspan that was possible in 4.x, but I don't have the code at hand right now. – Alexander
@Alexander, thank You for idea! I will do it. – Kast2K

1 Answers

2
votes

I think i achieve what you wanted with this CSS, i didn't do extensive tests to see if brakes any of the grid functionality though: (to better test it,in your fiddle, put a fixed height on the grid ):

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