关于Ext中TreePanel的滚动条问题

最近在项目中遇到一个问题，使用Ext的ViewPort布局，在页面的west使用accordion布局，放置2个TreePanel用作导航菜单树。由于菜单项很多，结果导致，当展开多个节点后，Ext会为TreePanel添加一个竖形滚动条，然而，如果将west部分缩小的时候，竖形滚动条会被遮住，本应出现的横向滚动条却没有出现。还有一个问题就是在页面最大化的时候展开多个节点显示出竖行滚动条后，在缩小页面，此时发现，竖形滚动条的滚动幅度仍为未调整页面大小之前的幅度，这就导致了导航菜单树底部被遮住，竖型滚动条不能被拖动到最下端。

观察原有的代码为：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

var viewport = new Ext.Viewport({     layout:'border',     items:[         new Ext.BoxComponent({             region:'north',             el: 'north',                height:80         }),new Ext.BoxComponent({             region:'south',             el: 'south',             height:25         }),{             region:'west',             id:'west-panel',             split:true,             width: 200,             margins:'0 0 0 0',              layout:'accordion',             title:'清分管理控制台',             collapsible :true,                      items: [             {                 title:'系统功能',                 border:false,                 html:'<div id="funcTree-div" style="width:100%;height:100%"></div>'             },{                 title:'个人信息',                 border:false,                 html:'<div id="perInfoTree-div" style="width:100%;height:100%"></div>'             }]         },             tab//初始标签页     ] });

在页面中有一个id为west的div标签快。之后又定义了两个TreePanel来渲染Ext为我们生成的funcTree-div和perInfoTree-div。结构就导致了上面的问题。

网上找来了很多办法，最后把它们综合了一下，得出解决办法为：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

var viewport = new Ext.Viewport({     layout:'border',     items:[         new Ext.BoxComponent({             region:'north',             el: 'north',                        height:60         }),new Ext.BoxComponent({             region:'south',             el: 'south',             height:25         }),new Ext.Panel({             region:'west',             el: 'west',             title:'清分管理控制台',             split:true,             width: 220,             autoScroll:false,             layout:'accordion',             collapsible :true,             border:true,             layoutConfig: {                 titleCollapse : true,                     animate : true,                     activeOnTop : false             },             items: [funcTree,perInfoTree]         }),           tab//初始标签页     ] });

将west的items由div变成了treePanel。用Panel来包装TreePanel，直接new TreePanel放到items中，而不是像以前一样，new TreePanel并让TreePanel去渲染items里定义的div。调试发现，缩小页面，竖形滚动条不能拉到底部的问题被解决了。剩下的就是缩小west部分，竖形滚动条被遮住的问题，在Ext的官网上找到了解决方法，为其页面添加一段css：

?

1 2 3 4

<style type="text/css"> .ext-ie .x-tree .x-panel-body {position: relative;} .ext-ie .x-tree .x-tree-root-ct {position: absolute;} </style>

实际上如果不将TreePanel用Panel包装，直接在页面上添加这段css，甚至会导致TreePanel消失的问题。

一切搞定。（最后鄙视ie一下，所有的问题都是ie下才有的，firefox没有任何问题。操，谁让ie现在是主流呢，不改也没办法）