PDA

View Full Version : Horizontal Scrollbar on TreePanel



timb73
16 Aug 2010, 4:30 AM
I have a viewport set up with a left hand panel and a right hand panel.


new Ext.Viewport({
layout: 'border',
defaults: {
split: true,
border: true,
bodyStyle: 'padding:10px'
},
items: [
{
defaults: {
border: false
},
region: 'west',
collapsible: true,
xtype: 'panel', // This panel will first contain the loading indicator later the tree.
id: 'lhs-panel',
autoScroll: true,
monitorSize: true, //appears to successfully create vertical scrollbar if window resized but not horiz for some reason...?
title: 'Explorer',
bodyStyle: 'padding:10px 0 10px 0px',
width: 300
}, {
region: 'center',
xtype: 'panel', // This panel will present details of the selected tree node.
id: 'rhs-panel',
autoScroll: true,
tbar: [
' ',
{
xtype: 'radiogroup',
columns: [115, 115],
items: [
{boxLabel: 'Summary details', name: 'rb-detail', inputValue: 'summary', checked: true},
{boxLabel: 'Full details', name: 'rb-detail', inputValue: 'full'}
],
listeners: {
change: function() {
full = !full;
refreshRhsPanel();
}
}
},
{
xtype: 'checkbox',
boxLabel: 'Show All Empty Fields',
listeners: {
check: function() {
showEmptyFields = !showEmptyFields;
refreshRhsPanel();
}
}
}
]
}
]
});Within the left hand panel I load in a TreePanel.


lhsPanel.removeAll();
lhsPanel.add({
region: 'center',
xtype: 'treepanel',
id: 'tree-panel',
useArrows: true,
autoScroll: false, // TODO: We actually do want scrolling but with horiz scrollbar at the bottom of the panel rather than foot of the tree.
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode(treeNodesConfig),
rootVisible: true,
listeners: {
beforeclick: function(n, e) {
if (n.attributes.href)
e.preventDefault(); // Since we've specified an href on the node, this prevents the link being followed on a single click.
},
dblclick: function(n, e) {
var poleObject = n.attributes.poleObject;
if (poleObject)
window.location.href = buildHref(poleObject);
}
}
});
lhsPanel.doLayout();
var treePanel = Ext.getCmp('tree-panel');
treePanel.getSelectionModel().on('selectionchange', function(selectionModel, node) {
refreshRhsPanel();
});
treePanel.getRootNode().expand();
treePanel.getRootNode().select();Some of the items within the Treepanel have some quite long captions and sometimes they overlap the right hand edge of the panel.
If I set up the Treepanel to autoscroll then the horizontal scrollbar appears immediately at the bottom of the tree.

21968
If I set the outer left hand panel to autoscroll then I don't get a horizontal scrollbar at all.

21969
What I would like to achieve is to get a horizontal scrollbar at the bottom of the left hand panel.

Any tips would be much appreciated.
Thanks.

Animal
16 Aug 2010, 4:52 AM
How are you hoping that lhsPanel sizes its child items?

YOU have to tell it using a layout config!

timb73
16 Aug 2010, 5:22 AM
Ah right, I see.
I'm pretty new to using Ext (only been a few weeks) so there's a lot that's not immediately apparent to me.

I've now set the outer panel to use layout: 'fit' and set the autoscroll: true on the treepanel and it looks good.

Thanks!