Sencha touch - 尝试从列表中删除行

Question

我尝试使用此代码获取可编辑列表：

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);
                        }
                    }]
        }]
    });
    }
});

但它无法正常工作。如果我按“编辑”按钮，则不会删除图像，因此不会删除项目......

Answer 1

我可以看到 3 件事：

1. 模板渲染一次，您需要在列表上调用 .refresh() 或 .refreshNode() 来更新任何项目模板。实现此目的的更好方法是通过 CSS 隐藏删除按钮，并在单击“编辑”按钮时显示它。

2. 顶部声明的 isEditing 变量和 isEditing 函数引用之间可能存在命名冲突。将这两个东西命名为相同会非常令人困惑，并且可能会导致变量作用域问题。

3. 您正在查找的点击事件可能被父列表项拦截，并且 Sencha Touch 正在将其转换为列表项上的“itemtap”事件。

Answer 2

我无法删除，直到我向模型添加了一个没有数据类型的 id 字段。我不知道为什么，因为它应该知道通过索引删除哪条记录。

Ext.regModel('Setting', {
fields: [
    {name: 'id'}, // delete works after adding
    {name: 'name', type: 'string'}
],
proxy: {
    type: 'localstorage',
    id: 'settings'
}

凯文