解决Ext 4.0.7 tree.Panel横向不出滚动条,纵向滚动条失效的问题
Posted java小秦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决Ext 4.0.7 tree.Panel横向不出滚动条,纵向滚动条失效的问题相关的知识,希望对你有一定的参考价值。
/** * 重写Ext.tree.Panel afterlayout方法,解决横向不出滚动条,纵向滚动条失效的问题 * 1.显示grid的css滚动条,对于树表横向滚动条没有办法使标题一块儿滚动,所以隐藏掉(在树表上定义属性treeGrid:\'Y\'); * 2.将grid的css纵向滚动条定位到最右侧; * 3.获取到ext自动添加的自己写纵向的滚动条,将它remove掉; * 4.将remove掉改成设置宽度为0隐藏掉。 * 遗留问题: * remove掉会造成grid页面数据新增时,无法定位新增行。 * 宽度设置为0会造成:鼠标滚轮可能会失效,需要鼠标左键拖动滚动条滚动。 */ Ext.tree.Panel.override({ listeners:{ afterlayout : function(treePanel, eOpts){ var emBody = document.getElementById(treePanel.body.id); var emView = document.getElementById(treePanel.getView().id); var emTable = document.getElementById(treePanel.getView().id).childNodes[0]; if(emTable != undefined){ var emTableW = emTable.style.width; var newEmTableW = parseInt(emTable.style.width.substr(0,emTableW.length-2))-20; emTable.style.width = newEmTableW+"px"; emTable.style.tableLayout = \'auto\'; emTable.style.borderCollapse = \'separate\'; } emView.style.overflow = \'visible\'; if(treePanel.treeGrid != \'Y\'){ emView.style.overflowX = \'auto\'; }else{ emView.style.overflowX = \'hidden\'; } emView.style.overflowY = \'auto\'; emView.style.position = \'relative\'; var emDivArr = emBody.parentNode.getElementsByTagName("div"); for(var i = 0; i < emDivArr.length; i++){ var emDiv = emDivArr[i]; if(emDiv.id.indexOf("gridscroller") == 0 && emDiv.className.indexOf("x-scroller-vertical") > 0){ /*if(emDiv.parentNode != null){ emDiv.parentNode.removeChild(emDiv); }*/ emDiv.style.width = "0px"; emView.style.width = treePanel.getWidth()+"px"; emBody.style.width = treePanel.getWidth()+"px"; } } } } });
- 在jsp中或在通用的js文件中加入下面的重写Ext.tree.Panel afterlayout的方法;
- 仅在ext4.0.7中简单测试过,其他版本请自行测试。
- 若在使用过程中发现会引起其他bug,请在原文出处回复讨论,谢谢。
作者:java小秦 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
|
以上是关于解决Ext 4.0.7 tree.Panel横向不出滚动条,纵向滚动条失效的问题的主要内容,如果未能解决你的问题,请参考以下文章
找出 ExtJs 中 Ext.panel.tree 中的选定项目是不是有子项
Ext.tree.Panel、itemclick、getTreeStore() 在 5.x 中找不到,但在 4.x 中有效