PDA

View Full Version : TreePanel unexpected hor scrolling with long text nodes



aufe
7 Apr 2010, 4:41 PM
Hi there, I hope anyone can look at this issue and come with an answer. Spent few hours looking at the forum without much success. Thanks.

Working on an ExtJS app which makes extensive usage of the TreePanel component, with dynamically loaded content. The treepanel width has a fixed size (strong requirement), treenodes can be lengthy and the number of tree levels, high.

The issue is the following: when clicking on a tree node having long text (pls see TreePanel2_click.jpg) or when conducting DD on it (pls see TreePanel3_DD.jpg) the treepanel shows the scrollbar OK, but the problem is that the treepanel content gets scrolled!! (to the right). Is there any way to avoid this automatic hor scrolling?? I would expect a hor scrollbar appearing normally, but not the treepanel content being scrolled to the right.

It was working fine in the 1st version (Extjs 2.2), this "bad" behaviour appeared as soon I was applying Extjs3.0 and later on Extjs3.2.0. After some tests it looks like the undesired hor scrolling takes place when the node gets selected (which happens when conducting click or DD on such node). It might be a ext-all.css issue but so far I have not been able to find where to hack it.

Many thanks for the support.

PS: I include the following code, for your reference:

<script>
Ext.onReady(function(){
var treePanel= new Ext.tree.TreePanel({
renderTo:'divModuleTree',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
loader:new Ext.tree.TreeLoader({
dataUrl:'back.asp',
baseParams:{moduleid:198950,sessionid:12345},
listeners:{beforeload:function(treeLoader,node){this.baseParams.type = node.attributes.type;}}
}),
root:{nodeType:'async',text:'Sample',draggable:false,type:'Root'}
});
treePanel.render("divModuleTree");

});
</script>
<div id="divModuleTree" style="overflow:auto;height:600px;width:150px;border:1px solid #c3daf9;"></div>