Sencha touch - пытается удалить строку из списка - PullRequest
Новая
       5

Sencha touch - пытается удалить строку из списка

0 голосов
/ 25 мая 2011

Я пытаюсь получить редактируемый список с этим кодом: 

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

но он не работает так, как должен. Если я нажимаю кнопку «РЕДАКТИРОВАТЬ», то изображение для удаления отсутствует, поэтому удаляемый элемент отсутствует ...

Ответы [ 2 ]

2 голосов
/ 27 мая 2011

Я вижу 3 вещи:

  1. Шаблон обрабатывается один раз, вам нужно вызвать .refresh () или .refreshNode () в списке, чтобы обновить любойшаблоны элементов.Лучший способ сделать это - скрыть кнопку удаления с помощью CSS и отобразить ее при нажатии кнопки «Изменить».

  2. Вероятно, существует конфликт именования между объявленной переменной isEditingвверху и ссылка на функцию isEditing.Очень странно называть эти две вещи одинаковыми, и это может привести к проблемам с областью видимости переменной.

  3. Событие click, которое вы ищете, может быть перехвачено элементом родительского спискаи Sencha Touch превращает его в событие itemtap в элементе списка.

1 голос
/ 29 мая 2011

У меня не было возможности удалить, пока я не добавил в свою модель поле id без типа данных.Я не знаю почему, поскольку он должен знать, какую запись удалить через индекс. 

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

Kevin

...