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

我可以看到三件事：

模板呈现一次，您需要在列表上调用.refresh（）或.refreshNode（）来更新任何项模板。更好的方法是通过CSS隐藏删除按钮，并在单击“编辑”按钮时显示它。
在顶部声明的isEditing变量和isEditing函数引用之间可能存在命名冲突。让这两个名称相同的东西非常令人困惑，并且可能导致变量范围的问题。
您要查找的点击事件可能会被父列表项拦截，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'
}

凯文

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

2 个答案: