Extjs6.2 树 treePanle scrollable属性设置横向滚动条失效问题解决

   如题，最近在学习Extjs时碰到tree panel利用原有的属性scrollable(原来是autoScroll) 设置后横向滚动条失效。看了API、也在网上查了解决方法。均没有作用，后来请教公司的大神之后给出的解决方案是：设置scrollable: false;之后在afterrender里添加方法：

me.view.el.dom.setAttribute('style', 'overflow:auto; margin:0px; width:100%; height:100%;');

ok，问题解决。

 

？？？很容易是吧。但是我告诉你，如果你的树节点数据多的话，会出现一个恶心的问题，那就是竖向滚动条加载不全....可能是因为在afterrender里的时候树并没有加载完，dom此时设置的滚动条完全是依据于你设置的高度和宽度（我暂且是这样认为的...）。到这个时候你猜测到了原因，问题自然就好解决了。当然你不能因此就设置成store为autoLoad，因为会大大减少页面加载的性能。

查询api之后，我发现另外一个event，afterlayout

listeners: {
        afterlayout:function (me) {
        // treepanel布局的bug，导致不能横向滚动。
        // 必须设置为scrollable: true, 并配合在afterlayout中设置(尝试在afterrender里试用,会出现滚动条不全的情况)
        // `me.view.el.dom.setAttribute('style', 'overflow-x:auto; margin:0px;width:100%; height:100%;');`
        me.view.el.dom.setAttribute('style', 'overflow:auto; margin:0px; width:100%; height:100%;');
    }
},

此时问题完全解决，afterlayout是在每一次treepanel有变化时都会去执行的。但是要注意scrollable不能设置成false了，要设置成true。

demo代码：

Ext.define('xxxxx.PersonalTree', {

    extend: 'Ext.tree.Panel',
    xtype: 'personal-sub-tree',
    border: false,
    animCollapse: true,
    rootVisible: false,
    lines: true,
    useArrows : true,
    scrollable: true,

    store: {
        autoLoad: false,
        proxy: {
            type: 'ajax',
            url:'',
            actionMethods: {
                read: 'POST'
            },
            reader: {
                type: 'json'
            },
            timeout : 120000
        },
        rootProperty: {
            expanded: false
        }
    },
    listeners: {
        afterlayout:function (me) {
            me.view.el.dom.setAttribute('style', 'overflow:auto; margin:0px; width:100%; height:100%;');
        }
    }
});