PDA

View Full Version : [2.x] How To: Resize column tree columns when container resizes



JamesC
28 Nov 2007, 3:37 AM
Hi,

Thought i'd share my experiences on how I managed to get my column tree to automatically reisize when you resize its container.



// Assuming column tree already setup with 4 columns
// widths array controls the percentages to resize the columns to
var tree = *YourTreeComponent*
var treecontainer = *YourTreesContainer*
treecontainer.on("resize", function() {
var treeWidth = treecontainer.getSize().width;
var bw = Ext.isBorderBox ? 0 : 2;
var widths = [(treeWidth*0.64), (treeWidth*0.12), (treeWidth*0.12), (treeWidth*0.12)];
var totalWidth = 0;
for (var i = 0; i < widths.length; i++) {
totalWidth += widths[i];
Ext.select("div.x-tree-hd:nth-child(" + (i+1) + ")", false, "*TreeID*").setWidth(widths[i] - bw);
Ext.select("div.x-tree-col:nth-child(" + (i+1) + ")", false, "*TreeID*").setWidth(widths[i] - bw);
tree.columns[i].width = widths[i];
}
tree.headers.setWidth(totalWidth);
tree.innerCt.setWidth(totalWidth);
});


Hope this is useful, or if theres a better way please let me know!

Cheers!

James

Ytorres
30 Dec 2007, 1:16 PM
Hi James !
Thanks for this code. Very usefull (for me, at least ;) ).

Just one improvement. "resize" event give us 3 options witch are "container", "new width" & "new height" for this container. So, your code can be :



// Assuming column tree already setup with 4 columns
// widths array controls the percentages to resize the columns to
var tree = *YourTreeComponent*
treecontainer.on("resize", function(Ccontainer, Cwidth, Cheight) {

var bw = Ext.isBorderBox ? 0 : 2;
var widths = [(Cwidth*0.64), (Cwidth*0.12), (Cwidth*0.12), (Cwidth*0.12)];
var totalWidth = 0;
for (var i = 0; i < widths.length; i++) {
totalWidth += widths[i];
Ext.select("div.x-tree-hd:nth-child(" + (i+1) + ")", false, "*TreeID*").setWidth(widths[i] - bw);
Ext.select("div.x-tree-col:nth-child(" + (i+1) + ")", false, "*TreeID*").setWidth(widths[i] - bw);
tree.columns[i].width = widths[i];
}
tree.headers.setWidth(totalWidth);
tree.innerCt.setWidth(totalWidth);
});


Thanks again for this ;)

KJedi
22 Feb 2008, 12:37 PM
One essential remark:
TreePanel should be rendered before this event is handled. Otherwise it doesn't have headers property.
One more thing. If your container is window or something other with borders, you should consider this in:
1) this resize function
2) TreeNodeUI renderElements function (I mean in the class, derived from this one)
3) When creating the tree, derived from the TreePanel. There is borderwidth parameter also.

Good luck :)

KJedi
22 Feb 2008, 12:39 PM
Ad one more thing. Instead of passing ID of the tree by hand, you can write:

tree.getId()
And that's all :)
It's especially useful when your tree has auto-generated ID. In my case when I assigned it manually, I had some bugs, so I came to this solution. It works excellent :)

nande
23 Jun 2009, 6:07 AM
thank you, this have been very usefull for me :)