Добавить вертикальную полосу прокрутки на панель ExtJS, которая содержит 4 других компонента

Question

Я создал Ext.Panel с макетом «hbox», добавил 4 ребенка, сетки деревьев с тем же магазином и теперь хочу иметь одну вертикальную полосу прокрутки для всех их и прокручивать только содержимое сеток, а не заголовки. Я просмотрел параметры панели Panel и прокручиваемую опцию, чтобы прокрутить весь макет, поэтому исчезнут дополнительные горизонтальные полосы прокрутки. Может ли кто-нибудь дать мне подсказку, с чего начать, какой вариант/компонент использовать для выполнения этой единственной вертикальной полосы прокрутки?

Почему я поставил 4 решетки деревьев на одной панели, используя тот же магазин? Потому что последний является компонентом Бринтума Ганта. Первый столбец первой сетки должен прокручиваться по горизонтали, когда элементы слишком длинны и не хотят использовать свойство CSS многоточия в ячейках. И время от времени мне нужно переключить Gantt на другую сетку с более подробной информацией. Также второе дерево имеет только столбцы дат на них и их нужно блокировать всякий раз, когда gantt или другой дочерний элемент переключает видимость.

Я использую ExtJS 6.0.1 Classic.

Заранее спасибо

Answer 1

Потому что вы хотите сохранить заголовки, вы не можете использовать панель скроллер. Вместо этого вы должны создать взаимные партнерские связи между сетевыми скроллерами:

Ext.each(grids,function(grid) { 
    if(grid.normalGrid) grid = grid.normalGrid; // Use the normal subgrid of a grid with locked columns. 
    Ext.each(grids,function(partner) { 
     if(partner.normalGrid) partner = partner.normalGrid; // Use the normal subgrid of a grid with locked columns. 
     if(grid != partner) grid.getView().getScrollable().addPartner(partner.getView().getScrollable(), "y"); // "y" tells the scrollable that the partnership is only regarding y axis. 
    }); 
}); 

Это заставляет их оставаться в синхронизации, as per the docs.