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

问题描述

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

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

但它无法正常工作。如果我按EDIT按钮，则没有删除图像，因此也没有删除的项目。     

解决方法

我可以看到3件事： 模板渲染一次，您需要在列表上调用.refresh（）或.refreshNode（）来更新任何项目模板。更好的方法是通过CSS隐藏删除按钮，并在单击“编辑”按钮时显示它。 在顶部声明的isEditing变量与isEditing函数引用之间可能存在命名冲突。将这两个名称命名为相同的名称非常令人困惑，并且可能导致可变作用域的问题。 您要查找的click事件可能会被父列表项拦截，并且Sencha Touch会将其转变为列表项上的'itemtap \'事件。     ,在向模型添加没有数据类型的id字段之前，我无法删除。我不知道为什么，因为它应该知道要通过索引删除的记录。

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

凯文