ExtJS 6.5.3 Установите высоту строк сетки, чтобы они поместились на экране

Позже я использовал 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;
}

Это работает, но в этом случае я устанавливаю высоту строки как постоянную. Но целью является просмотр полной сетки на любом разрешении экрана.

Как я могу решить эту проблему?

Спасибо!


css extjs extjs6-classic
person Kast2K    schedule 06.06.2018    source источник
comment
Вы можете перенести несколько сотен строк кода из 4.x TableView в пользовательский TableView 6.x, чтобы вернуть старое поведение. Я сделал это некоторое время назад, потому что мне нужен диапазон строк, который был возможен в 4.x, но сейчас у меня нет под рукой кода.   -  person Alexander    schedule 08.06.2018
comment
@Александр, спасибо за идею! Я сделаю это.   -  person Kast2K    schedule 08.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, что достиг того, чего вы хотели, с помощью этого 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;
}
person Fabio Barros    schedule 12.06.2018
comment
Спасибо! Это действительно красиво, чем копировать сотни строк между проектами. - person Kast2K; 13.06.2018