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

[ashiso]

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

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:

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?

[bluehipy]

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.

[ashiso]

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

[bluehipy]

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

[ashiso]

Wasn't quite the easiest thing to do:

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 */

[bluehipy]

but you solved it