Sencha Touch SortableList

Question

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.plugin.SortableList

UPDATED QUESTION:

CODE:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var templ = new Ext.XTemplate(
      '<tpl if="isActive">',
            '<div style="color:red" class="',
            Ext.baseCSSPrefix + 'list-sortablehandle',
            '">',
        '</tpl>',    
    '<b>Name: {text}</b>',
        '<tpl if="isActive">',
            '</div>',
        '</tpl>',
            {
                // XTemplate configuration:
                compiled: true,
                // member functions:
                isitem2: function (name) {
                    return name == 'item2';
                },
            }
);

        Ext.Viewport.add({
            xtype: 'list',
            itemId: 'dynamicContainer',
            infinite: true,
            plugins: 'sortablelist',
            itemTpl: templ,//'<span style="width:30px;height:20px;background-color:gray;display:block;float:left;" class="' + Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
            listeners: [{
                event: 'dragsort',
                fn: function (list, row, from, to) {
                    console.log(to);
                }
            }],
            data: [{
                text: 'Item 1-Active',
                isActive:true
            }, {
                text: 'Item 2-Active',
                isActive: true
            },
             {
                text: 'Item 3-Active',
                isActive: true
            }, {
                text: 'Item 4',
                isActive: false
            },
                  {
                text: 'Item 5',
                isActive: false
            }]
        });

    }
});

See in Action:https://fiddle.sencha.com/#fiddle/3kl

With the help of @mishoboss asnswer https://stackoverflow.com/a/21762299/1405008

I did almost(70%) did what I want but I need to restrict the list content in black should not be rearranged by the user, I restricted the user to drag specific cell but when user drag other cell they can place it is inactive cell location to reorder that cell also. But it should not be like so.

As In my attached screen bottom of the list marked in red arrow should not be sortable.

OLD QUESTION I look into sencha touch document there is built in plugin called SortableList.But they never give and example source for how to use that plugin.

RED: list item not allow to drag and sort by user Yello:Sortable list items

I know this is very easy to achieve through jquery.

But I never get any idea or sample to achieve this through sencha touch plugin.

Also I don't want to add Jquery to my app because it may result in performance issue while using with sencha frame work.

Note: Also I just want the user to tap and hold in list to drag not just drag, because it will affect default scroll behavior. Help Please.!

Answer 1

I play since several hours with sortablelist too. This is how I made it work:

                    xtype: 'list',
                    plugins:'sortablelist',
                    itemTpl: '<span class="'+Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
                    listeners: [
                        {
                            event: 'dragsort',
                            fn: function(list, row, from, to){
                                alert(to);
                            }
                        }
                    ],
...

Note, you need a "handle" in order to work. Handle is the area where you tap and the list item become draggable. Default selector for handle is

'.' + Ext.baseCSSPrefix + 'list-sortablehandle'

and you could define different selector with the handleSelector parameter.

However I couldn't made it work as it should be working. List items became draggable, but they don't snap and reorder. Either there is some issue with it, or I'm still missing something. Please, post here if you have any success.

Edit: I just tested it one more time on Sencha Fiddle: https://fiddle.sencha.com/fiddle/3k3/preview

Still not working as expected.