PDA

View Full Version : Row Height Resize in Grid (Same as Column Resize)



lukefowell89
31 Jan 2011, 2:19 AM
I have a grid which is now looking very much like a spreadsheet with a fair bit of functionality now. You can see it here at: http://www.aztec-online.com/spreadsheet

I have a couple of things left, but the main thing I want to sort out at the moment is resizing row heights. How do I add the splitter like for a column resize, to the rows?

I would really like to have it work the same way, any suggestions?

P.s any bugs anyone can spot would be helpful, there are bound to be a couple in there!

Thanks

lukefowell89
1 Feb 2011, 2:47 AM
Any suggestions?

Condor
1 Feb 2011, 2:53 AM
The columns don't actually have splitters. The entire grid header is a drag/drop zone created with Ext.grid.HeaderDragZone and Ext.grid.HeaderDropZone.

You would have to create your own Ext.ux.grid.RowDragZone and Ext.ux.grid.RowDropZone classes and create them in the grid view afterRenderUI method.

lukefowell89
1 Feb 2011, 6:55 AM
Ok, I see that is its within the gridview, but what is "Ext.grid.GridView.SplitDragZone"?

Is it HeaderDragZone/DropZone or has it got anything to do with SplitDragZone? I saw this which made me think this way:



if (grid.enableColumnResize !== false) {
this.splitZone = new Ext.grid.GridView.SplitDragZone(grid, this.mainHd.dom);
}

if (grid.enableColumnMove) {
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(grid, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(grid, this.mainHd.dom);
}

Condor
1 Feb 2011, 7:08 AM
Oops... Yes I meant Ext.grid.GridView.SplitDragZone.

You would have to create a different dragzone for the grid rows (look at the Ext.grid.GridView.SplitDragZone code and modify it for rows instead of columns).

lukefowell89
1 Feb 2011, 7:08 AM
Ok Thanks ill start looking into that! Thanks

lukefowell89
1 Feb 2011, 7:29 AM
One little issue I am having is that the 2 values you pass in the constructor in the column splitdragzone are (grid, header). The problem is with resizing row heights, is that I cannot pass a single element that is the first column.

I need to break it up and apply this dragzone to every rows first column?

Condor
1 Feb 2011, 7:34 AM
Correct, so you'll have to pass the entire grid body element and detect if the mouse is over the first cell yourself.

asxna
31 May 2012, 4:33 AM
did anyone proceeded with suggestions of Condor? I need a very similar UI control for in browser xl sheet we are making. I'll be more than happy to take anyone's partial work and improve on it.