Question

I try to get an editable list with this code:

var isEditing = false;
new Ext.Application({
    launch: function(){
    new Ext.Panel({
        //layout: 'card',
        fullscreen: true,

        items: new Ext.List({
        id: 'myList',
        store: new Ext.data.Store({
            fields: ['myName'],
            data: [{ myName: 1 }, { myName: 2 }, { myName: 3}]
        }),
        itemSelector: '.x-list-item',
        multiSelect: true,  
        itemTpl: '<span class="name">{myName}</span>',
        tpl: new Ext.XTemplate(
                '<tpl for=".">' +
                    '<div class="x-list-item">' +
                    '<tpl if="this.isEditing()">' +
                        '<img src="images/delete.gif" ' +
                                'onclick="Ext.getCmp(\'myList\').myDeleteItem({[xindex-1]})" ' +
                                'style="vertical-align: middle; margin-right: 15px;"/>' +
                    '</tpl>' +
                    '{myName}</div>' +
                '</tpl>',
                {
                    compiled: true,
                    isEditing: function () { 
                        console.log('isEditing (tpl):' + isEditing)
                        return isEditing; 
                    }
                }),
        myDeleteItem: function (index) {
            var store = this.getStore();
            var record = store.getAt(index);
            console.log('removing ' + record.data.myName);
            store.remove(record);
        },
        listeners: {
            itemtap: function () {
                if (isEditing){
                   console.log('isEditing: ' + isEditing);
                    return;
                }

            },
            beforeselect: function () { 
                    console.log('isEditing: before  ' + !isEditing);
                    return !isEditing;

            }
        }
    }),

        dockedItems: [{
            dock: 'top',
            xtype: 'toolbar',
            layout: { pack: 'right' },
            items: [
                    {
                        xtype: 'button',
                        text: 'Edit',
                        handler: function () {
                            var list = Ext.getCmp('myList');
                            if (!isEditing)
                                list.mySelectedRecords = list.getSelectedRecords();
                            isEditing = !isEditing;
                            this.setText(isEditing ? 'Save' : 'Edit');
                            list.refresh();
                            if (!isEditing)
                                list.getSelectionModel().select(list.mySelectedRecords);
                        }
                    }]
        }]
    });
    }
});

but its not working like it should. If I press the EDIT button there is no delete-image and so there is no deleted item….

Answer 1

There are 3 things that I can see:

1. The Template is rendered once, you will need to call .refresh() or .refreshNode() on the list to update any item templates. The better way to accomplish this would be to hide the delete button via CSS and display it when the ‘edit’ button is clicked.

2. There is probably a naming conflict between the isEditing variable declared at the top and the isEditing function reference. It is very confusing to have these two things named the same, and can lead to problems with variable scoping.

3. The click event that you are looking for may be intercepted by the parent list item and Sencha Touch is turning it into a ‘itemtap’ event on the list item.