View Full Version : Setting a GridPanel width to the total width of the visible columns

28 Nov 2007, 5:37 PM

I apologize if this question has shown up already in other posts but I could not figure out how to do the same.

I have a GridPanel in one of the tabs in a TabPanel and am setting autoScroll to true in the containing tab.
Currently I'm setting the GridPanel width to
width: cm.getTotalWidth(false) so that the width is the same as the total width of the visible columns by default.
However, when columns are resized or hidden columns are unhidden, the width of the GridPanel does not get resized and the rightmost columns go out of the viewport when I scroll across.

I want the width of the grid to get resized so that I can see all the columns when I scroll across the grid.
Does anybody know how we can do this?

Thank you.

28 Nov 2007, 11:02 PM
I haven't tried this live, but...

How about using the "hiddenchange" event of the column model to trigger a resize of the grid?

Can be something like (done freehand, so don't assume this works)
grid.getColumnModel ().on ("hiddenchange", function () {
grid.setWidth (cm.getTotalWidth (false));
});Hopefully that'll do something like you want it to.

28 Nov 2007, 11:44 PM
I tried it and it works! Thanks for the help:)

For the column resize event, I did

var adjustWidth = function(colmodel, columnIndex, hidden){
grid.setWidth (cm.getTotalWidth (false));
"hiddenchange": adjustWidth,
"widthchange": adjustWidth

This works fine for the column hidden/unhidden events but not for the column resize event.
I could get around this problem by handling the "columnresize" event instead as follows.

grid.on("columnresize", adjustWidth);

However, do you know why the "widthchange" event is not being handled as I expect?

29 Nov 2007, 9:24 AM
I believe the widthchange event is only called when you call the cm.setColumnWidth fn. It's not fired during resizing b/c it would probably result in too many calls as each column width changed.