ExtJS 6 TreePanel滚动不起作用答案

【问题标题】：ExtJS 6 TreePanel scrolling not workingExtJS 6 TreePanel滚动不起作用
【发布时间】：2016-01-06 09:34:47
【问题描述】：

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

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

提前致谢

【问题讨论】：

在树面板上使用style: {overflow: 'auto'} 你在做什么？
你的建议让它双向滚动，是的，但它不完全是我所追求的。使用您的解决方案，我面板中的工具栏也会滚动（'我已经更新了我的小提琴）

标签： javascript extjs scrollable treepanel

【解决方案1】：

我不确定我们是否能完全实现您想要的。不过让我们试试吧。

要使垂直滚动条正常工作，您必须在树形面板上定义一个高度。到目前为止，树形面板会根据其内容的高度动态调整大小，因为没有为其定义高度。由于即使父面板也没有定义高度，所以将高度作为百分比也行不通，但是例如身高：500 会。如果您需要在调整浏览器窗口大小时布局浮动，请查看父面板的 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()。

【讨论】：

您好，谢谢您的回答！我已经用你的建议更新了我的小提琴。我必须改进一下，但这就是我想要的。再次感谢！