setScrollable(false) refreshes List. How to prevent?

[swarnendude]

I am trying to create a List re-ordering functionality by dragging list items around. It works perfectly. I disable list scrolling on dragstart event and enable scrolling on dragend event.

However, the problem comes while there is more items in a list and it requires scrolling. While I scroll down to say 20th Item, while starting dragging again the list scrolls to top. I am not refreshing list anywhere and found out the issue is mostly coming for setScrollable(false) function. Here is my dragstart code:

onDragStart : function(draggable, e, offsetX, offsetY){           
    this.deselectAll();
    this.setScrollable(false);    // This line causes list scroll to top every time
    this.dragEl = draggable.getElement();
    this.calculateBoxes();
    draggable.getElement().toMoveIndex = draggable.getElement().index;
}

I have to stop scrolling at dragstart event anyway to drag items properly. Any idea how to prevent list scroll-to-top function?

Here is how the functionality looks. I have also attached source code for all the necessary files. You can test yourself and provide suggestions.

list-drag.png

[haduki]

...
//this.setScrollable(false); 
var scrollview=this.getScrollable();
if(scrollview){
    scrollview.getScroller().setDisabled(true);
}
...

[swarnendude]

Great. It worked fine. However, please change the variable name"scrollerview" to "scrollview" inside if condition.

[Petitbomber]

Hello,
I have an error with "calculateBoxes" function.
Could you share a full working exemple.

Thanks.

[Manoj Solanki]

Hello Swarnendu,

I am using your code for reordering list cell and facing issue in following function:-

createDraggables : function(list,eOpts){
var me = this, draggableItem, index = 0;
// Create draggable component for each list item
Ext.each(list.element.query(this.getSelector()), function(item){
/**Uncaught TypeError: Cannot call method 'query' of undefined*/
item = Ext.get(item);
// Add an index to each draggable item for moving around
item.index = index++;
// If the element is already draggable, skip it
if(item.hasCls('x-draggable')){
return;
}
Ext.create('Ext.ux.util.Draggable', {
element : item,
threshold: 0,
revert: true,
revertDuration : 0,
direction : 'vertical',
constraint : {
min: {
x: -Infinity,
y: -Infinity
},
max: {
x: Infinity,
y: Infinity
}
},
listeners : {
scope: me,
dragstart: me.onDragStart,
dragend: me.onDragEnd,
drag : me.onDrag,
order: 'before'
}
});
}, this);
},

Please reply as early as possible.
Thanks in advance