1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    1
    Ismailp is on a distinguished road

      1  

    Default Unanswered: How can I replicate this list animation using Sencha Touch 2.x?

    Unanswered: How can I replicate this list animation using Sencha Touch 2.x?


    Hi guys,
    I don't know if you have heared of the iOS app Clear. It has some really cool list swiping animations.

    I was thinking of replicating some of the behavior on my Sencha application. When user swipes list they se a checkbox in that same row, as if it was positioned under the list item. So far I have this code as my listener:

    Code:
    itemswipe: function (list, idx, target, record, evt) {
                        alert(record.data.name);
                    }
    What should I do next? How do I create the checkbox and how can I make it visible by sliding the actual list item to the right?

    Thanks!

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    ashiso is on a distinguished road

      0  

    Default


    Hi,

    I want to achieve the same thing. So far I've changed the lists itemTpl to contain a div for each item, which is absolutely positioned "outside" the viewport via
    Code:
    .button-bar {
        position: absolute;
        left: 100%;
    }
    Then I added the draggable config object to the list config:
    Code:
    config: {
            draggable: {
                direction: 'horizontal',
                constraint: {
                    min: {x: -300, y: 0},
                    max: {x: 300, y: 0}
                },
                listeners: {
                    dragstart: function(component, index, target, record, eventObject, options) {
                        var elem = component.getElement();
                    }
                }
            }
    }
    Now .. this would do exactly what I wanted, but instead of making the list items draggable the whole listview is draggable - which is not what we want. Is there a way to simply do this via the config?

    If not my approach would be, to set a listener for the itemtouchstart event via the listeners config and make the touched element draggable via Ext.util.Draggable and handle all logic from there.

    Would be cool to hear how others are doing this!

  3. #3
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    617
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Well, that's how I am doing this:

    http://joy2share.com/senchatouch/art...pe-effect.html


    I am using a plugin to add the swipe effect on items.
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    ashiso is on a distinguished road

      0  

    Default


    Well that's an interesting approach but it doesn't quite mimc the Clear App behaviour.
    What we want is, that you can literally drag the list item to the left or right and with it sticks a toolbar that gets shown by the dragging behaviour ..

    I'm currently trying the approach I described above, so if anyone got some input on this it would be helpful: http://www.sencha.com/forum/showthread.php?256245

Thread Participants: 2

Tags for this Thread