PDA

View Full Version : Empty space in grid with changeing number of columns



klausL
7 Aug 2009, 1:43 AM
I have a GridPanel that can have from one to more than 50 columns depending on the shown data. The user is allowed to move and hide columns in the grid. My problem is that with only one or two columns, the grid has a lot of empty space between the columns and the scrollbar. That does not look very good. The problem would be solved if the alternating back color of the rows would fill the space.

I have tried to solve this with autoExpandColumn and forceFit, but they do not work very well in this situation. AutoExpanding the last column looks great until the user moves the last column or hides it. ForceFit is not good, because with 50 columns there really needs to be horisontal scrolling.

I was wondering if there is any way to expand the alternating back color of the rows to the full width of the grid without affecting column widths?

Condor
7 Aug 2009, 2:02 AM
It's a bit of a hack, but you could add an extra column (without data) using width:0, hideable:false and use it as the autoExpandColumn.

klausL
7 Aug 2009, 3:32 AM
I added the following column and made it the autoExpandColumn and set autoExpandMin to 0.

{header: " ", width: 0, sortable: false, fixed: true,
hideable: false, dragable: false, id: "expand-column",
dataIndex: "", menuDisabled: true}What the dragable option is can be found from this thread (http://www.extjs.com/forum/showthread.php?t=53666).

This works fine when the user is only hiding or unhiding columns. Moving columns can be a problem because if some column is moved to the last position then the empty column moves to the middle of the grid. Also resizing any of the columns seems to disable the autoExpandColumn setting and the empty column does not automatically resize itself anymore.

I think I can solve the moving of the columns part in same way as in this thread (http://extjs.com/forum/showthread.php?t=75370). But for the resizing part I do not yet have a solution.