javascript - ExtJS 6 TreePanel 滚动不起作用

Question

我一直试图让我的树面板以两种方式滚动。这是我的代码:https://fiddle.sencha.com/#fiddle/13cb

我可以在包装面板中设置scrollable: true，但这并不能解决水平滚动问题。此外，通过这种方法，组合框也会向上滚动。但我只希望树面板水平和垂直滚动。我怎样才能实现这一目标？

提前致谢

Answer 1

我不确定我们能否达到您想要的效果。但让我们尝试一下。

要使垂直滚动条正常工作，您必须在树面板上定义高度。截至目前，树面板的大小会动态调整到其内容的高度，因为没有为其定义高度。由于即使父面板也没有定义高度，因此以百分比形式给出高度也不起作用，但是例如高度:500就可以了。如果您需要在调整浏览器窗口大小时布局 float ，请查看父面板的 vbox 或 border 布局。

要使水平滚动条正常工作，您必须了解网格列的工作原理。您尚未定义列配置，这使得树面板假定您希望单个列占据树面板宽度的 100%:

   if (!me.columns) {
        if (me.initialConfig.hideHeaders === undefined) {
            me.hideHeaders = true;
        }
        me.addCls(me.autoWidthCls);
        me.columns = [{ // define columns configuration with a single column
            xtype    : 'treecolumn', // the column should be a treecolumn
            text     : 'Name',
            flex     : 1, // and take up 100% of the width of the panel
            dataIndex: me.displayField // and use the displayField as 
        }];
    }

您无法使列自动占据其内容所需的宽度。但你可以例如听nodeexpand and nodecollapse事件及来电column.autoSize() .