Статьи

Написание приложения Sencha Touch, часть 4

Ноябрь 28, 2018

Это последняя из четырех статей о том, как написать приложение Sencha Touch. Если вы новичок в этой серии, вот ссылки на предыдущие части:

В третьей части этого руководства мы работали над редактором заметок и добавили возможность создавать заметки. Настало время позволить нашим пользователям редактировать и удалять заметки. Давайте сначала поработаем над функцией редактирования заметки.

Раскрытие событий в сенсорном списке Sencha

Когда лицо, использующее приложение, касается кнопки раскрытия заметки в представлении «Список заметок», выбранная заметка должна отображаться в представлении «Редактировать заметку»:

Мы можем выполнить эту функцию, реализовав обработчик onItemDisclosure из списка заметок. Вот код:

NotesApp.views.notesList = new Ext.List({
    id: 'notesList',
    store: 'NotesStore',
    onItemDisclosure: function (record) {
        var selectedNote = record;
        NotesApp.views.noteEditor.load(selectedNote);
        NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
    },
    itemTpl: '
<div class="list-item-title">{title}</div>' +
        '<div class="list-item-narrative">{narrative}</div>',
    listeners: {
        'render': function (thisComponent) {
            thisComponent.getStore().load();
        }
    }
});

Функция обработчика принимает выбранную заметку в качестве параметра. В обработчике нам нужно загрузить заметку в редактор, используя метод load () редактора, а затем сделать представление редактора заметок активным посредством вызова setActiveItem () окна просмотра.

Очень круто. В этот момент мы можем переключиться на эмулятор, где мы сможем редактировать заметки.

Удаление записей из хранилища данных

Удаление заметок также очень просто. Кнопка «Корзина» на нижней панели инструментов представления «Редактор заметок» активирует эту функцию. Нам нужно изменить обработчик кнопки следующим образом:

NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
    dock: 'bottom',
    items: [
        { xtype: 'spacer' },
        {
            iconCls: 'trash',
            iconMask: true,
            handler: function () {

                var currentNote = NotesApp.views.noteEditor.getRecord();
                var notesList = NotesApp.views.notesList;
                var notesStore = notesList.getStore();

                if (notesStore.findRecord('id', currentNote.data.id)) {
                    notesStore.remove(currentNote);
                }

                notesStore.sync();

                notesList.refresh();
                NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
            }
        }
    ]
});

После получения ссылок на текущую заметку, список заметок и хранилище данных заметок мы используем функцию магазина findRecord () для поиска и удаления заметки, загруженной в редактор.

Затем мы вызываем функцию sync () в хранилище, чтобы сделать удаление постоянным, и переходим к повторной визуализации списка заметок и активируем представление списка заметок.

Эта процедура аналогична той, которую мы применяли при реализации функции «Сохранить заметку», хотя в этом случае мы удаляем заметку, а не сохраняем ее.

Быстрая проверка на эмуляторе должна подтвердить, что теперь мы можем удалять заметки.

Группировка элементов в сенсорном списке Sencha

И последнее, что мы хотим сделать, — в представлении списка заметок отрисовать заметки, сгруппированные по дате. Это облегчит нашим пользователям работу с их заметками.

Во-первых, нам нужно сообщить нашему notesList Ext.List, что он должен визуализировать сгруппированные элементы. Мы можем сделать это с помощью опции сгруппированной конфигурации следующим образом:

NotesApp.views.notesList = new Ext.List({
    id: 'notesList',
    store: 'NotesStore',
    grouped: true,
    emptyText: '<div style="margin: 5px;">No notes cached.</div>',
    onItemDisclosure: function (record) {
        var selectedNote = record;
        NotesApp.views.noteEditor.load(selectedNote);
        NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
    },
    itemTpl: '<div class="list-item-title">{title}</div>' +
        '<div class="list-item-narrative">{narrative}</div>',
    listeners: {
        'render': function (thisComponent) {
            thisComponent.getStore().load();
        }
    }
});

Затем нам нужно переопределить функцию getGroupString () NotesStore:

Ext.regStore('NotesStore', {
    model: 'Note',
    sorters: [{
        property: 'date',
        direction: 'DESC'
    }],
    proxy: {
        type: 'localstorage',
        id: 'notes-app-store'
    },
    getGroupString: function (record) {
        if (record && record.data.date) {
            return record.get('date').toDateString();
        } else {
            return '';
        }
    }
});

Вы можете определить поведение группировки хранилища, используя свойство groupField и функцию getGoupString ().

Функция getGroupString () возвращает строку для группировки на основе свойств модели данных хранилища. По умолчанию getGroupString () возвращает значение свойства groupField. В нашем случае мы хотим использовать значение даты заметки в качестве заголовка группы, но мы хотим отформатировать значение как дату.

Если мы проверим эмулятор, заметки, сделанные в тот же день, должны отображаться в том же заголовке группы:

Мы сделали это!

Это в значительной степени это. Очень простое приложение Sencha Touch и простой способ изучить некоторые функции платформы Sencha Touch.

Я надеюсь, что вы поднимите это приложение на новый уровень, когда узнаете больше о фреймворке. :-)

И не забудьте оставить комментарий, дающий мне знать темы Sencha Touch, о которых вы хотели бы, чтобы я написал.

Загрузите приложение Notes: Notes-App-v1.0.zip

 

С http://miamicoder.com/2011/writing-a-sencha-touch-application-part-4

35
Share: