Разрешить изменение высоты сетки в зависимости от количества строк (автовысота)

#extjs #extjs7

Вопрос:

Я реализую сетку в ExtJS 7.0.0 (современный) и хотел бы, чтобы высота сетки была установлена на количество строк, которые она содержит. Как вы можете видеть из примера на кухонной раковине ExtJS, высота сетки установлена на 400, и сетку необходимо прокручивать, чтобы увидеть остальные строки.

Скриншот сетки, которую необходимо прокрутить, чтобы просмотреть все строки

То, что я ищу, — это возможность установить высоту на auto и адаптировать высоту сетки в соответствии с количеством строк в сетке. Мы нашли способ сделать это в более старых версиях ExtJS, однако я не могу найти решение для этой проблемы для версии 7 (современная).

Может ли кто-нибудь указать мне правильное направление здесь?

Взгляните на мою скрипку Sencha, если хотите попробовать.

Ответ №1:

Вот скрипка

Ключевой особенностью является установка свойства сетки с возможностью прокрутки: true

Макет панели настроен на vbox.
Я установил maxHeight равным 400, чтобы сетка имела высоту 400 пикселей, но вы не можете установить свойство maxHeight и установить flex: 1, и сетка будет занимать все доступное пространство по вертикали, а остаток будет доступен для прокрутки.

РЕДАКТИРОВАТЬ: новая скрипка Использует макет vbox и устанавливает для infinite значение false в сетке. На вашей скрипке просто удалите свойство height:300 и добавьте infinite: false

1. Спасибо за ваш ответ. Я не хочу устанавливать максимальную высоту. В вашем примере мне нужно прокрутить сетку, чего я пытаюсь избежать. Взгляните на эту скрипку, и вы поймете, что я имею в виду: fiddle.sencha.com/fiddle/3ae7

2. fiddle.sencha.com/#fiddle/3aegamp;view/editor Используйте макет vbox и установите для infinite значение false в сетке. На вашей скрипке просто удалите свойство height:300 и добавьте infinite: false.

3. Большое спасибо за это. Ваша вторая скрипка — это именно то, что мне нужно. Если вы обновите свой ответ, я отмечу его как принятый!

Ответ №2:

Собственный способ:

 let grid = Ext.getCmp('example-grid-id'); //get your grid component, there are few ways to do this. "getCmp" is one of those ways
let gridHeightHeader = grid.renderElement.dom.getElementsByClassName("x-headercontainer")[0].offsetHeight;
let gridHeightBody   = 0;
let rows = grid.renderElement.dom.getElementsByClassName("x-listitem");
Array.from(rows).forEach(function(row){
    gridHeightBody =row.offsetHeight; // in pixel, you can console log here
});
grid.setHeight(gridHeightHeader gridHeightBody 40); // set new dynamic height of the grid   40 as additional height

Sencha Ext JS способ:

 {
    xtype : "panel", //parent of grid component
    fullscreen: true, //optional
    layout:"fit", //HERE is the key
    items:{
        xtype:'grid',
        // height: you don't need this height prop again :)
    }
}