Swipe to Delete on Sencha Touch 2.0 list

swipe_to_delete.js

/* Assuming:
 * dataview is a { xtype: "list" }
 * dataview.itemTpl includes a <div class="deleteplaceholder"></div>
 *
 * Delete button will disappear as soon as something is touched
 */

dataview.on("itemswipe", function(dataview, ix, target, record, event, options) {
	if (event.direction == "left") {
		var del = Ext.create("Ext.Button", {
			ui: "decline",
			text: "Delete",
			style: "position:absolute;right:0.125in;",
			handler: function() {
				record.stores[0].remove(record);
				record.stores[0].sync();
			}
		});
		var removeDeleteButton = function() {
			Ext.Anim.run(del, 'fade', {
				after: function() {
					del.destroy();
				},
				out: true
			});
		};
		del.renderTo(Ext.DomQuery.selectNode(".deleteplaceholder", target.dom));
		dataview.on({
			single: true,
			buffer: 250,
			itemtouchstart: removeDeleteButton
		});
		dataview.element.on({
			single: true,
			buffer: 250,
			touchstart: removeDeleteButton
		});
	}
}));

Great, thanks. But for me there was an unwanted itemtap on the dataview item, fixed with:

handler: function(btn, e) {
e.stopEvent();
...
}

For me, I must replace target.dom with target.element.dom

Works great, thanks! I also had to replace target.dom with target.element.dom (Sencha Touch 2.1.1). If you want the delete button to fade in, just add

Ext.Anim.run(del, 'fade', {
      out : false
});

after del.renderTo(...

To anyone else who might have run into the same trouble as I did (Destry function not working): Please remember to add the requires: ['Ext.Anim'] since it is not loaded automatically with the default library.

Glad it's helping, folks!

hi,can you provide a simple example for this? and where should i put my swipe_to_delete.js file?

Hi all,

If someone is interested to put buttons on swipe on a list item, i created a plugin for it:

https://github.com/Positive-LABS/SlideActionsPlugin

Hope it helps :)