1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    0
    mtippin is on a distinguished road

      0  

    Default Swipe delete button on dataview list?

    Swipe delete button on dataview list?


    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.

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    The Netherlands
    Posts
    75
    Vote Rating
    4
    SebasSP is on a distinguished road

      0  

    Default


    The Touch Tweets example features swipe to delete on the entered search queries:
    http://dev.sencha.com/deploy/touch/e...n/touchtweets/
    Source code is available in the Sencha Touch SDK download.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Norway
    Posts
    23
    Vote Rating
    1
    _piotr is on a distinguished road

      0  

    Default


    Hi, I was just wondering what I have done wrong...
    I am posting the relevant parts - I hope so

    In a view:
    Code:
     
     {                
                    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:
    Code:
    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!

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    pepperseb is on a distinguished road

      0  

    Default


    I think this is exactly what you're looking for:

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

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Norway
    Posts
    23
    Vote Rating
    1
    _piotr is on a distinguished road

      0  

    Default


    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:
    Code:
    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).
    Code:
    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!

Thread Participants: 3

Tags for this Thread