View Full Version : Customizable Grid columns order

9 Jul 2014, 8:19 AM
Hello there,
I am trying to save the layout of a grid (hidden/visible columns, columns size and column position) so that each user can customize it.
At the moment I'm able to save the grid.columns[columnIndex].hidden and the grid.column[columnIndex].width parameters and restore them using the grid.column[columnIndex].hide()/show() or setWidth(NNN).

What I cannot do is to save information about columns position.
I mean, if a user drags the first column to another position (e.g. the second position), and the second columns automatically slides at the first position, the only parameter to change (if I'm not wrong) is grid.column[columnIndex].x.
I tried to see what the "setWidth(width)" method does, and created a method setX(x) that sets the x values and calls the grid.ownerCt.doLayout() method.

Surprisingly nothing happens.

Can you please suggest me how to proceed?
I hope I was clear enough, but if anything is still unclear please let me know where I should be more specific so that you can better understand my issue :-)

thanks a lot guys!

16 Jul 2014, 10:55 AM
You're asking how to programmatically change the index of a column?

17 Jul 2014, 1:36 AM
Hello, thanks for your answer.I need to know how to make the change to the position of a column effective.I'm able to see and edit most of the parameters that I need (width, hide/show) but even if I change the "X" parameter to each column to design a new layout , the columns are stuck at their position.Maybe I should forget about the "x" parameter and move onto something else?thanks

17 Jul 2014, 4:24 AM
Yes, x will attempt to change the actual page coordinates not the order of the columns. For this, I would use the move method on the grid header and provide the column's current index (or the column instance itself) and the new index you want:

header.move(3, 2)

17 Jul 2014, 6:30 AM
thanks for your answer, I have not much time to try this now and tell you if it works.I cannot find documentation about header.move method on the extjsdocs, can you suggest me where to find something?Thanks

17 Jul 2014, 7:09 AM
The method is on any Ext.container.Container subclass: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.Container-method-move

17 Jul 2014, 7:13 AM
Ok thanks! I found that one too, but my grid.columns is an array, there is no items property. the items property that I have is under grid.header but it does not contain columns, I think that this method is not applicable to columns.in the tbar I added a new button with handler : function(){ grid.header.move(1,2);//also tried grid.header.move(columns[1],columns[2])//also tried grid.columns.move(1,2)}none of them seem to work.

17 Jul 2014, 7:35 AM
This emulates what happens when you drag a column: