PDA

View Full Version : Swipe delete button on dataview list?



mtippin
20 Apr 2012, 10:14 AM
I'm looking for an example that implements a "swipe activated" delete button on a dataview list -- i.e., swipe left on a list item and a "Delete" button appears; click the button and the list item gets deleted; click anywhere else and the button hides.

Searched high and low and haven't found anything that seems relevant.

SebasSP
21 Apr 2012, 5:08 AM
The Touch Tweets example features swipe to delete on the entered search queries:
http://dev.sencha.com/deploy/touch/examples/production/touchtweets/
Source code is available in the Sencha Touch SDK download.

_piotr
21 May 2012, 5:10 AM
Hi, I was just wondering what I have done wrong...
I am posting the relevant parts - I hope so :)

In a view:


{
xtype: 'panel',
layout: 'fit',
flex: 1,
items: [
{
xtype: 'list',
id: 'access-guest-dataview',
store: 'AccessGuest',
itemTpl: new Ext.XTemplate(
'<div>{DisplayName} <button style="float: right;" onclick="MyApp.app.getController(\'Reservation\').deletePersonFromAccessList({PersonId})">' + Translations._Delete + '</button></div>'
)
}
]
}

in a controller:


deletePersonFromAccessList: function (personId) {
var dataview = this.getAccessGuestsDataView();
var store = dataview.getStore();
var data = store.getData().all;
for (var i in data) {
if (data[i].data && data[i].data.PersonId == personId) {
store.remove(data[i]);
break;
}
}
},


It works on desktop, does not work on mobile devices - when I click on a button, list item is highlighted and nothing happens. It looks like tap event is not fired.

I didn't try touchtweets - first I would like to ask if there is any easy way to fix my solution.

Thanks in advance!

pepperseb
21 May 2012, 5:22 AM
I think this is exactly what you're looking for:

http://market.sencha.com/addon/deletable-list

_piotr
21 May 2012, 6:34 AM
Yeah, it could work... However I've got a small error when I click on delete button. I've got following message:

Uncaught TypeError: Cannot read property 'isModel' of null sencha-touch-all-debug.js:47839

I have:


Ext.define('MyApp.view.AccessList', {
extend: 'Ext.jsv.DeletableList',

config: {
itemTpl: Ext.create('Ext.XTemplate',
'<div>{DisplayName}</div>',
'<p class="delete" style="position: absolute; right: 20px; top: 12px; display: none;">',
'<img src="resources/images/delete.png" alt="delete" />',
'</p>'
),
store: 'AccessGuests',

deletable: {
storage: true,
message: true,
cls: 'p.delete',
title: 'delete item',
text: 'are you sure?'
}
}
});
...and it does not delete an entry. Moreover store is empty (without any records).


doDeleteItem: function (buttonId) {
this.del.hide();
if (buttonId === 'yes') {
var store = this.addStore,
storage = this.setting.storage;


store.removeAt(this.idx);


if (storage) {
store.sync();
}
}
},

Maybe it has something to do with 'deleteitem' event, does it? I couldn't find that event in Sencha touch 2 documentation.

Thanks for tips!