1. #1
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    Answers
    1
    swarnendude is on a distinguished road

      0  

    Default Answered: setScrollable(false) refreshes List. How to prevent?

    Answered: setScrollable(false) refreshes List. How to prevent?


    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:

    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
    Attached Files
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

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

  3. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Vote Rating
    20
    Answers
    64
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    ...
    //this.setScrollable(false); 
    var scrollview=this.getScrollable();
    if(scrollview){
        scrollview.getScroller().setDisabled(true);
    }
    ...
    Last edited by haduki; 23 Nov 2012 at 2:44 AM. Reason: misspelling
    I write English by translator.

  4. #3
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    Answers
    1
    swarnendude is on a distinguished road

      0  

    Default


    Great. It worked fine. However, please change the variable name"scrollerview" to "scrollview" inside if condition.
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

  5. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    Petitbomber is on a distinguished road

      0  

    Default


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

    Thanks.

  6. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    23
    Vote Rating
    1
    Manoj Solanki is on a distinguished road

      0  

    Default Issue with Sencha Touch 2.0

    Issue with Sencha Touch 2.0


    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

  7. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    1
    Vote Rating
    0
    jeetu_gis is on a distinguished road

      0  

    Default


    Can you provide me working example?