PDA

View Full Version : [Solved]TreePanel Scrollbars not working when in Panel?



mino
1 Dec 2007, 4:57 PM
This problem is driving me crazy: I have a TreePanel loaded inside a Panel (with accordion layout) which height adapts to the size of the browser window.

Well... see this demo to understand what I mean:
http://vps.minux.it/extjs-test/

I'm referring to the treepanel on the left.
I can't find a way to show the TreePanel scrollbars when needed. The only way is removing its autoHeight and setting a fixed height for that div.

Could anyone help me, please? :)

mino
3 Dec 2007, 9:20 AM
Please, anyone can help me? :)

tryanDLS
3 Dec 2007, 9:31 AM
Beta1?? You're kidding. Please upgrade to RC1 and retest.

mino
3 Dec 2007, 9:40 AM
Done, now it is based on RC1.
Same url as above.
Same results... :(

tryanDLS
3 Dec 2007, 10:09 AM
Give the panel a height and set autoScroll:true

mino
3 Dec 2007, 10:13 AM
Yes, that's exactly what I'm trying to avoid.
I'd like to have that tree list fit all the available vertical space inside the accordion tab.

Do you think there's any workaround?

Thanks!

Morris
3 Dec 2007, 10:26 AM
I use this lot to create an accordian with a number of trees. Maybe something in here will help you?

Libraries excerpt :


function buildTree(title, node_name, id) {
var tree = new Ext.tree.TreePanel({
// layout:'fit',

title:title, //'Projects',
id:node_name, //'tree',
autoScroll:true,
sorting:true,
animate:true,
enableDD:true,
rootVisible:false,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'/zones/open/'
})
});

// set the root node
var root = new Ext.tree.AsyncTreeNode({
text: 'Zones',
draggable:false,
id:id //'1'
});

tree.setRootNode(root);

tree.on("click", function(e) {
alert("Tree item clicked - " + e.text);
});

tree.on("contextmenu", function(node, event) {
// alert("Context menu - " + node.text);
showContextMenu(node);
event.stopEvent();
event.preventDefault();
});

tree.on("beforenodedrop", function(e) {
var moveNode = new Ext.data.Connection();
moveNode.request({
url: '/zones/move',
method: "POST",
params: {
node: e.data.node.id,
target: e.target.id,
type: e.point
},
callback: function(o, success, response) {
//Connection check
if ( !success ) {
Ext.Msg.alert('Connection Error', 'Failed to connect to server to add property to the slideshow. Check your Internet connection and try again. If the problem persists please contact the administrator.');
return false;
}
}
});
});

return tree;
}

function buildProjects() {
var projects = [];
<% for project in Zone.projects %>
projects.push(buildTree('<%= escape_javascript project.name %>', '<%= escape_javascript project.name.downcase.gsub(' ', '') %>', '<%= project.id %>'));
<% end %>
return projects;
}

var rootContextMenu = new Ext.menu.Menu('rootContext');
var mainContextMenu = new Ext.menu.Menu('mainContext');

mainContextMenu.add(
new Ext.menu.Item({text: 'Rename ...', handler: zoneRename}),
new Ext.menu.Item({text: 'Add Child', handler: zoneAddChild}),
new Ext.menu.Item({text: 'Add Sibling', handler: zoneAddSibling}),
new Ext.menu.Separator(),
new Ext.menu.Item({text: 'Delete ...', handler: zoneDelete}),
new Ext.menu.Separator(),
new Ext.menu.Item({text: 'Tasks ...', handler: zoneTasks})

);

rootContextMenu.add(
new Ext.menu.Item({text: 'Add Child...', handler: zoneAddChild})
);

function showContextMenu(node){
if(node.isRoot) {
rootContextMenu.show(node.ui.getAnchor());
}
else
{
mainContextMenu.show(node.ui.getAnchor());
}
}

function zoneTasks(node, bnode) {
alert(node.id + ', ' + bnode.id + ', ');
// maintabs.getItem('tasks').getUpdater().update('/graphs/tasks/' + node.text);
}

function zoneAddChild(node) {
alert('Add zone child' + node.text);
}

function zoneAddSibling(node) {
alert('Add zone sibling' + node.text);
}

function zoneRename() {
alert('Rename zone ');
}


function zoneDelete() {
alert('Delete zone');
}


function buildAccordian(projects) {
var accordian = new Ext.Panel({
region:'west',
title:'Projects',
split:true,
border:false,
width: 200,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
defaults: {
bodyStyle: 'padding:3px'
},
layoutConfig: {
titleCollapse: false,
animate: true
},
items: projects
});

accordian.on("contextmenu", function(node, event) {
alert("Context menu for accordian" + node.text);
showContextMenu(node);
event.stopEvent();
event.preventDefault();
});

return accordian;
}


Then when the page has loaded :



function buildLayout() {
projects = buildProjects();
accordian = buildAccordian(projects);

messages = Messages();
notes = Notes();
maintabs = buildMainTabs([messages, notes]);

utilities = buildUtilities();
status = buildStatus();

mainLayout(accordian, maintabs, utilities, status);
}

hendricd
3 Dec 2007, 10:36 AM
try containerScroll:true on your TreePanel config.

mino
3 Dec 2007, 5:15 PM
try containerScroll:true on your TreePanel config.
There's already a containerScroll:true.


I use this lot to create an accordian with a number of trees. Maybe something in here will help you?
Thanks indeed, but I really looks the same. Can you tell me how is configured the div in the html of the page?
Also, if the tree is longer than the accordion tab, do you see a vertical scrollbar?

Thanks

new2ext
3 Dec 2007, 6:12 PM
Your adding TreePanel to another container so move autoScroll and containerScroll to the container config.


// ------------ WEST1 ------------
{
contentEl: 'west1',
title: 'Foo One',
border: false,
iconCls: 'nav',
autoScroll: true,
containerScroll: true
}
// ... and so on

mino
3 Dec 2007, 6:16 PM
Your adding TreePanel to another container so move autoScroll and containerScroll to the container config.
I love you! :)
Thanks, problem fixed...

ludoo
7 Dec 2007, 7:56 AM
Can you update your demo site, pls ?

appshare
7 Dec 2007, 9:16 AM
update the demo - I've the same problem

Thank's a lot