PDA

View Full Version : GridView - allow column widths to grow as big as needed?



markalanpeter
17 Dec 2009, 4:34 PM
I'm displaying a grid with a large number of columns; large enough so that horizontal scrolling is a necessity. So, autoFill doesn't help me because I'm not trying to squeeze everything into the width of the screen. I want it to scroll.

But I would like some kind of auto-sizing of column widths. I want each column width to be set as wide as needed to display the full content of each row without having to manually resize.

I'm not seeing any options in GridView or Column that would do this automatically. I could write an onRender function, but I have no idea how I would calculate the widths I need.

This is fairly easy to do with a simple HTML table. If you set the overflow to allow scrolling, the behavior I'm looking for is actually the default. Any ideas on how to make a Grid work this way?

Mark

tobiu
17 Dec 2009, 10:37 PM
hi markalanpeter,

each grid-cell uses overflow:hidden. you can disable this,then you have a gurantee, that your content is shown. this may lead to rows getting multiple lines if your content-string contains spaces.

the default-html-behavior is quite difficult for a grid, since it does not use a table as its base-element. each row is a div containing a table (watch the dom in firebug).

i have some ideas how to extend the GridView but no time for this yet.
http://www.extjs.com/forum/showthread.php?t=8517

kind regards,
tobiu

markalanpeter
18 Dec 2009, 1:57 AM
Hello tobiu,

Thank you so much for your response. If I can override the "overflow" attribute of the style for the grid cell, I should theoretically also be able to adjust the style not to wrap (with "white-space: nowrap;" perhaps).

I will give this a try and let you know how it goes.

Thanks again,
Mark

tobiu
18 Dec 2009, 2:36 AM
.x-grid3-cell-inner, .x-grid3-hd-inner{
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding:3px 3px 3px 5px;
white-space: nowrap;
}


should be your class. if you want to change a single grid and not all use #wideGrid .x-grid3-cell-inner, with wideGrid as the id of the gridPanel.

kind regards,
tobiu