PDA

View Full Version : Panel, TreePanel and Scrollbars



rmompo
20 Mar 2011, 5:54 AM
Hi, in newbie to ExtJs, so im dealing with a thing, let me explain:
I have a layout (as you can see on layout.jpg), it has been made with a viewport and borderLayouts:


...
<script type="text/javascript">
...
var navData;
...
function doInit() {
...
navData = Ext.getCmp("navigatorData");
...
}//doInit
...
function doNavigatorDataRefresh() {
navData.load({
url:"http://localhost/tag/navigator.php (http://www.sencha.com/forum/"http://localhost/tag/navigator.php)",
text:"Cargando...",
scripts:true,
nocache:true
});
}//doNavigatorDataRefresh
...
Ext.onReady(function() {
Ext.QuickTips.init();

var layout = new Ext.Viewport({
renderTo:document.body,layout:"border",
items:[{
region:"center",layout:"fit",border:false,
items:[{
layout:"border",border:false,
items:[{
id:"detailPanel",region:"center",title:"Detail",layout:"fit",margins:"5 5 0 0",cmargins:"5 5 0 0",
items:[{
layout:"border",border:false,
items:[{
id:"detailData",region:"center",border:false,autoScroll:true
},{
id:"detailToolbar",region:"north",height:27,border:false,
items:[detailToolbar]
}]
}]
},{
id:"propertiesPanel",region:"south",title:"Properties",height:280,split:true,layout:"fit",collapsible:true,margins:"0 5 5 0",cmargins:"5 5 5 0",
items:[{
layout:"border",border:false,
items:[{
id:"propertiesData",region:"center",border:false,autoScroll:true
},{
id:"propertiesToolbar",region:"north",height:27,border:false,
items:[propertiesToolbar]
}]
}]
}]
}]
},{
id:"navigatorPanel",region:"west",title:"Navigator",width:200,split:true,layout:"fit",border:true,collapsible:true,margins:"5 0 5 5",cmargins:"5 5 5 5",
items:[{
layout:"border",border:false,
items:[{
id:"navigatorData",region:"center",border:false,autoScroll:true
},{
id:"navigatorToolbar",region:"north",height:27,border:false,
items:[navigatorToolbar]
}]
}]
}]
});//layout
doInit();
doNavigatorDataRefresh();
});//Ext.onReady
</script>
...

finally a load "navigator.php" into "navData" object:


<html>
<head>
<script type="text/javascript">
var jsonData = <?php include_once("navigator.json.php"); ?>;
var navigatorTree = new Ext.tree.TreePanel({
border:false,
enableDD:false,
autoScroll:true,
containerScroll:true,
root:{
nodeType:"async",
text:"Projects",
draggable:false,
iconCls:"navProject",
id:"PRO=",
children:jsonData
},
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.id + '"');
}
}
});//navigatorTree
Ext.onReady(function() {
navigatorTree.render("divTree");
navigatorTree.root.expand(true);
navigatorTree.root.collapse(true);
navigatorTree.root.expand();
});//Ext.onReady
</script>
</head>
<body>
<div id="divTree" style="width:100%;height:100%;background-color:#FF0000;"></div>
</body>
</html>


The data is loaded in one shoot without any problems (no-scrollbar.jpg), the TreePanel is rendered into a div (red background), but the things happen later.

If i expand any nodes to make the tree taller than the div a vertical scrollbar appears (vertical-scroll.jpg), but when a node is wider than the div a horizontal scrollbar appears on it (horizontal-scrollbar.jpg)

If you take a closer look, you'll se that the horizontal scroll is INSIDE the vertical one. so the only way to see it is to
scroll all the way down.. so.. how to put every scrollbar on the right panel?

thanks in advance

by the way.. another question..
it is posible to pass the node id to a TreeLoader, how to?



...
loader: new TreeLoader ( url:"dataLoad.php (http://www.sencha.com/forum/"dataLoad.php)", params:{param1:myNode.id?,param2....} )
...