Sencha Touch: Reorder a list with drag and drop handles using SortableList

Part of a project I'm working on requires the ability to reorder a list. I was pretty sure sencha touch could handle this, but couldn't figure out how to do it. I searched google for a solid week. I had one lead that turned bad after digging into it further. I basically gave up and moved onto the next issue when I ran across the solution buried in their documentation: SortableList

The second problem arose from the poor documentation on this feature. Outside of the class docs there is nothing explaining how to use it. The upside is at least it's easy to view the source.

I ran across this forum post that talked about a bug in the code. This was the only code I found that gave an example of how the code works.

There are a few things required to use this plugin.

Step 1: Include the plugin

// Make sure the plugin in include when the app builds
requires: ['Ext.plugin.SortableList'],

config:{
        // Include the plugin in your config. Don't forget the period on the class name
        plugins: [{xclass: 'Ext.plugin.SortableList', handleSelector: '.gripper'}],

        
        // These are required to fix a bug that exists in the plugin
        infinite: true,
        variableHeights: true,
        ...
}

Step 2: Configure the drag handle

config: {
        // Set the class to the name you passed in for the handleSelector
        itemTpl: '<span class="gripper"></span>[html goes here]'
        ...
        }

The tag used for the list-sortablehandle is the object that will start the reorder process. This can be styled using whatever you like.

Step 3: Listen for the finishing event

config: {
        listeners:[
            event: 'dragsort',
            // to is the new position in the list
            // from is where the item used to be
            fn: function(listObject, row, to, from)
        ]
        ...
}

It was smooth sailing after this point.