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

      0  

    Default Unanswered: Setting Ext.dataview.List - Item to draggable changes absolute position to top 0

    Unanswered: Setting Ext.dataview.List - Item to draggable changes absolute position to top 0


    Hi,

    I'm trying to implement a similar list-behaviour like the iOS App Clear. That is, if you swipe a list-item to the right it gets marked as "done" and if you swipe to the left you can delete it.
    More info in this thread: http://www.sencha.com/forum/showthre...376#post937376

    As you can read my approach looks like this

    Code:
    Ext.define('todon.view.Tasks', {    extend: 'Ext.List',
        xtype: 'TaskList',
        
        requires: [
            ""
        ],
        
        config: {
            id: "listview",
            store: "Tasks",
            
        itemTpl: [
            '    <div class="list-item" style="background: {colorcode}green;">',
            '        <div class="list-item-inner">',
            '            <div class="task-name">{Name}</div>',
            '            <div class="task-category">{Categories}</div>',
            '            <div class="task-date">{date}</div>',
            '            <div class="task-timetracked">{TimeTracked}</div>',
            '            <p class="delete" style="position: absolute; right: 5px; top: 20px; display: none;">',
            '                <img src="resources/images/delete.png" alt="delete" />',
            '            </p>',
            '        </div>',
            '        <div class="button-bar">',
            '            <div class="left-handle"></div>',
            '            <div class="done"></div>',
            '            <div class="details"></div>',
            '            <div class="timer"></div>',
            '            <div class="delete"></div>',
            '        </div>',
            '    </div>'
            ].join(""),
            
            listeners: {
                
                itemtouchstart: function (list, index, target, record, e, eOpts) {
                    var config = {
                            direction: "horizontal",
                            constraint: {
                                min: {x: -300, y:0 },
                                max: {x: 300, y: 0}
                            },
                            listeners: {
                                drag: function (obj, e, xPos, yPos) {
                                    //console.log(obj)
                                    //console.log(xPos);
                                }
                            }
                        },
                        list = Ext.getCmp("listview");
                    
                    if (!target.hasListener("drag")) {
                        list.setScrollable(false);
                        target.setDraggable(config);
                    } else {
                        console.log("target has listener already");
                    }
                    
                },
                
                itemtouchend: function (series, item, event, eOpts) {
                    var list = Ext.getCmp("listview");
                    console.log("touchend on", item);
                    list.setScrollable(true);
                }
            }
        }
    });
    The Problem:
    Whenever I start to touch/drag a list item, it's container get's the following css assigned:
    Code:
    element.style {min-height: 47px !important;
    -webkit-transform: translate3d(-134px, 0px, 0px);
    }
    
    
    Matched CSS Rules
    .x-stretched.x-container {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    }
    .x-list .x-list-item {
    position: absolute !important; <- added
    left: 0;
    top: 0;
    color: black;
    width: 100%;
    }
    .x-size-monitored {
    position: relative; <- removed
    }
    .x-paint-monitored {
    position: relative; <- removed
    }
    .x-draggable {
    z-index: 1;
    }
    Now, the translate3d is all good because I want that, but how can I make it so the elements stay relative. I mean now, each item gets pushed to the top and stays there .. meaning the whole list layout gets destroyed ..

    Anyone knows how to change this quickly?

  2. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    You don't want to drag the target, the entire list item container, you have to drag some of its child inside the item container.
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

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

      0  

    Default


    Interesting! I'll look into that. Can you perhaps give a code example?

  4. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    List item are positioned absolute by default. They have top:0, left:0, position:absolute and...


    -webkit-transform: translate3d(0px, yOffsetpx, 0px);


    The y offset place it in there, so that is what ruins the position in your case. You are not allowed to change it's yOffset in your 3d translation.



    To apply your desired effect, set the drag action to the target child, use an extra container div class .your-container, before the .task-name one, and drag it inside the .list-item-inner one.


    http://docs.sencha.com/touch/2-1/#!/...hod-setElement


    var toBeDragged = target.child('.your-container')

    draggable.setElement( toBeDragged );


    Something like this
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

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

      0  

    Default


    Wasn't quite the easiest thing to do:
    Code:
    itemtouchstart: function (list, index, target, record, e, eOpts) {
        var itemInner = Ext.select(".list-item-inner", target.innerElement.dom),
        config = {
            element: itemInner.elements[0],
            /* [..] */
        }, 
    /* more code */
    Attached Images

  6. #6
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    but you solved it
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar