PDA

View Full Version : Issue with accordion panel and tree



jej2003
18 Oct 2012, 7:04 PM
I am trying to add a treepanel to an accordion and have the accordion not set to fill. When I do this, the trees height is updated, but the parent container is never re-layed out and worse when I have the animations for tree node expand/collapse enabled calling doLayout seems to be behind. I've attached an example of the issue which is reproduced by expanding/collapsing several nodes, you'll notice that the accordion size does not update properly. So the real question is how can this be made to work properly without disabling the animations?



Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);


Ext.onReady(function() {
Ext.QuickTips.init();

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'check-nodes.json'
}
});


var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Check Tree',
//animate : false,
listeners : {
afteritemcollapse : function(){
console.log('resize');
tree.doLayout();
},
afteritemexpand : function(){
tree.doLayout();
}
}
});

Ext.create('Ext.container.Viewport', {
layout: {
type: 'accordion',
fill : false
},
items: [Ext.create('Ext.panel.Panel',{title : 'empty'}),tree]
});
});




contents of check-nodes.json



[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true,
"checked": true
},{
"text": "Take a nap",
"leaf": true,
"checked": false
},{
"text": "Climb Everest",
"leaf": true,
"checked": false
}]
},{
"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]
},{
"text": "Remodel Project",
"cls": "folder",
"children": [{
"text": "Finish the budget",
"leaf": true,
"checked": false
},{
"text": "Call contractors",
"leaf": true,
"checked": false
},{
"text": "Choose design",
"leaf": true,
"checked": false
}]
}]

VDP
19 Oct 2012, 1:30 AM
I agree it isn't 100% accurate upon the first run but after expand/collapse it runs quite well..

I made a fiddle:

http://jsfiddle.net/Vandeplas/qWygj/1/ (http://jsfiddle.net/Vandeplas/qWygj/1/)

jej2003
19 Oct 2012, 4:16 AM
So this looks like an issue that was approved on in 4.1.1 as I am running 4.1.0. The initial sizing is still strange, I wonder if there is a way around that?

Here is it broken in 4.1.0

http://jsfiddle.net/jjah4/

James Goddard
19 Oct 2012, 4:22 AM
fill (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Accordion-cfg-fill) : Boolean (http://docs.sencha.com/ext-js/4-1/#!/api/Boolean)
True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set.




The Tree contraol does not really support auto height so if you want to use fill: false you will have to set an explicit height on the tree control.

jej2003
19 Oct 2012, 5:55 AM
Ok, so is there a way to make this work by listening to some event on the tree and forcing a layout on the accordion?

James Goddard
19 Oct 2012, 5:57 AM
You need to set a height on the tree. You can do that on a variety of events such as render, show, etc.

jej2003
19 Oct 2012, 6:22 AM
http://jsfiddle.net/NrXdm/

This seems to work and I'm not setting the height anywhere, not sure if it's the most efficient though.

If I were to manually set the height what would I be setting it to? Would it be a matter of looking at the view and getting the height of that and setting the trees height to that?

VDP
21 Oct 2012, 11:07 PM
Why do you set the:


listeners : {
afteritemcollapse : function(){
tree.doLayout();
},
afteritemexpand : function(){
tree.doLayout();
}
}


You won't need those.. unnecessary calling doLayout is pretty expensive..

jej2003
22 Oct 2012, 5:46 AM
The issue is that I want the tree to fill only the space it needs, when it's collapsed the panel holding the tree should be smaller, this was the only way I could figure to make this work. I have not tried getting the height of the view and setting the tree to that, but again it would have to occur after each expand/collapse of the nodes in the tree.

VDP
22 Oct 2012, 11:03 PM
I see your point but it happens automatically. Try this (http://jsfiddle.net/Vandeplas/NrXdm/1/). I used your last fiddle and just left out that part. It resizes just fine when collapsing or expanding.