将垂直滚动条添加到包含 4 个其他组件的 ExtJS 面板

Question

我已经创建了一个布局为 'hbox' 的 Ext.Panel，添加了 4 个 children，具有相同商店的树状网格，现在希望所有这些都有一个垂直滚动条并且只滚动网格的内容而不是 headers。我搜索了包含的面板选项，可滚动选项将滚动整个布局，因此 children 的可选水平滚动条将消失。有人可以给我提示从哪里开始，用什么 option/component 来完成这个单一的垂直滚动条？

为什么我使用同一个商店将 4 个树状网格放在同一个面板中？因为最后一个是 Bryntum Gantt 组件。当项目太长并且不想在单元格上使用省略号 CSS 属性时，第一个网格的第一列应该水平滚动。有时我需要将甘特图切换到另一个包含更多细节的网格。此外，第二棵树上只有日期列，并且必须在甘特图或其他 child 切换可见性时锁定。

我使用 ExtJS 6.0.1 Classic。

提前致谢

Answer 1

因为您想保留 headers，所以您不能使用面板滚动条。相反，您必须在网格滚动器之间建立相互的伙伴关系：

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。

将垂直滚动条添加到包含 4 个其他组件的 ExtJS 面板

Add vertical scrollbar to an ExtJS panel which contains 4 other components

extjs

scrollbar

treegrid