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

[JamesC]

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]

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]

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]

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]

thank you, this have been very usefull for me :)