PDA

View Full Version : Auto scroll gridpanel when record is being dragged



ajay.kumar2
5 Sep 2013, 10:41 AM
Hi,

I need help on doing auto-scroll in a gridpanel when i am dragging a record from the grid to drop on another record.

Consider there are 20 records in a grid panel and there are only 10 in viewable mode and for viewing others i have to scroll down the grid scroll.

Now when i want to drag a record which is at say position 2 to record at position 19, i need the grid scroll to automatically (read programatically ) scroll down as i am moving my mosue downwards with the dragged record.

Is there a event in which i can capture the drag being done and how to programatically scroll down the gridpanel vertical scroll bar ?

I am using Ext.dd.DropTarget and have overriden the notifyOver method, i m using ext js 3.2.1 and my source and target grid is same.

Any help would be greatly appreciated.

Thanks,

slemmon
9 Sep 2013, 7:40 AM
Likely containerScroll: true is what you're looking for:

http://docs-origin.sencha.com/extjs/3.4.0/#!/api/Ext.dd.DragZone-cfg-containerScroll

ajay.kumar2
10 Sep 2013, 9:51 AM
Hi Slemmon,
Thanks for replying.
I tried containerScroll but it didnt work for me.
Is there a way i can get the scroll element and make it slide a little up or down as i am moving my mouse in upwards or downwards direction.
I am trying to do this on Ext.dd.DropTarget notifyOver method.
Thanks,

slemmon
10 Sep 2013, 12:16 PM
You may find the scroll method helpful:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Element-method-scroll (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-scroll)

Each component may have different elements that you can scroll so you'll have to consider the component when trying to scroll it.

i.e. Grid = grid.getView().getEl().scroll()
Panel = panel.body.scroll()

ajay.kumar2
11 Sep 2013, 9:48 AM
Hi Slemmon,

Is there a way to capture mouse drag event on a grid row ? i tried to call the scroll from notifyOver of Ext.dd.DropTarget but it didnt solve my auto scroll issue.

i need a mouse movement event on which i will programatically do a scroll. Can you suggest suitable event for that ?

Thanks,

slemmon
11 Sep 2013, 10:39 AM
I've not tried implementing my own version of containerScroll before personally. You might look at the source for Ext.dd.DragZone, though. It shows what it's doing for containerScroll: true in there.
http://docs.sencha.com/extjs/3.4.0/source/DragZone.html#Ext-dd-DragZone-cfg-containerScroll

ajay.kumar2
16 Sep 2013, 1:41 AM
Hi Slemmon,

I tried looking into the implementation of containerScroll but i didnt solve my problem. Is there a way i can share/upoad my POC application with you for this issue ?

What i need is the scroll bars to automatically scroll down in the direction of the mouse movement (up or down) when a record is being dragged and moved ? i need this so i can drop the dragged record over a a particular record.

45816


thanks,