How to Create a Sencha Touch 2 App, Part 4

This is the fourth part of my tutorial on how to create a Sencha Touch 2 application. In this article, we are going to complete the following tasks:

  • Add the delete note feature to the Note Editor View.
  • Implement the navigation back to the Notes List Container View when the Home button in the Note Editor View is tapped.
  • Modify the Notes List Container View so it renders the notes grouped by date.

Deleting Records from a Sencha Touch Data Store

The Delete Note workflow begins when a user taps the Delete Button on the Note Editor View:

This Button needs a tap handler, which we will add to the NoteEditor Class, in the NoteEditor.js file:

1 var deleteButton = {
2     xtype: "button",
3     iconCls: "trash",
4     iconMask: true,
5     handler: this.onDeleteButtonTap,
6     scope: this
7 };

As we did with the Save Button, we are using the handler and scope configs to map the function that will handle tap events on the Button, as well as to pass the View as the scope for the handler function.

Of course, we need to add the onDeleteButtonTap() function to the NoteEditor Class:

1 onDeleteButtonTap: function () {
2     console.log("deleteNoteCommand");
3     this.fireEvent("deleteNoteCommand", this);
4 }

This is the same pattern we’ve used to emit events from the Views throughout the application. We capture the event triggered from a control in the View, and create a View event that is in turn captured by the Controller.

Over in the Notes Controller, we are going to map a handler function to the deleteNoteCommand event fired by the Note Editor View. We will do this in the control config, under the noteEditor key:

1 control: {
2     notesListContainer: {
3         // The commands fired by the notes list container.
4         newNoteCommand: "onNewNoteCommand",
5         editNoteCommand: "onEditNoteCommand"
6     },
7     noteEditor: {
8         // The commands fired by the note editor.
9         saveNoteCommand: "onSaveNoteCommand",
10         deleteNoteCommand: "onDeleteNoteCommand"
11     }
12 }

Now we can implement the onDeleteNoteCommand() function like so:

1 onDeleteNoteCommand: function () {
3     console.log("onDeleteNoteCommand");
5     var noteEditor = this.getNoteEditor();
6     var currentNote = noteEditor.getRecord();
7     var notesStore = Ext.getStore("Notes");
9     notesStore.remove(currentNote);
10     notesStore.sync();
12     this.activateNotesList();
13 }

Here, we acquire references to the Note Editor, the note loaded into the editor, and the Notes Store. Remember that the getNoteEditor() function is a routine the framework created for us when we declared the editor in the refs config:

1 refs: {
2     // We're going to lookup our views by xtype.
3     notesListContainer: "noteslistcontainer",
4     noteEditor: "noteeditor"
5 }

Our next steps in onDeleteNoteCommand() are to remove the current note from the store and make the changes permanent:

1 notesStore.remove(currentNote);
2 notesStore.sync();

Finally, we activate the Notes List Container View:

1 this.activateNotesList();

Another quick check on the emulator should confirm that at this point we are able to delete notes.

Navigating Back To the Main View

In order to navigate from the Note Editor View back to the Notes List Container View without making any changes to a note, we need to add a tap handler for the Home Button in the Note Editor Class:

1 var backButton = {
2     xtype: "button",
3     ui: "back",
4     text: "Home",
5     handler: this.onBackButtonTap,
6     scope: this
7 };

We will define the onBackButtonTap() function as follows:

1 onBackButtonTap: function () {
2     console.log("backToHomeCommand");
3     this.fireEvent("backToHomeCommand", this);
4 }

In the Controller, we will map this event to the onBackToHomeCommand() handler function:

1 control: {
2     notesListContainer: {
3         // The commands fired by the notes list container.
4         newNoteCommand: "onNewNoteCommand",
5         editNoteCommand: "onEditNoteCommand"
6     },
7     noteEditor: {
8         // The commands fired by the note editor.
9         saveNoteCommand: "onSaveNoteCommand",
10         deleteNoteCommand: "onDeleteNoteCommand",
11         backToHomeCommand: "onBackToHomeCommand"
12     }
13 }

And the onBackToHomeCommand() function will look like this:

1 onBackToHomeCommand: function () {
3 console.log("onBackToHomeCommand");
4 this.activateNotesList();
5 }

At this point, we can use the emulator to check that a tap on the Home Button activates the Notes List Container View.

Setting Up Grouping in a Sencha Touch List

One important usability detail we are missing is the ability to render the cached notes grouped by date. It’s amazing how easily we can accomplish this in Sencha Touch. Let’s first define a grouper config for the Notes Store:

1 Ext.define("", {
2     extend: "",
3     requires:"",
4     config: {
5         model: "NotesApp.model.Note",
6         proxy: {
7             type: 'localstorage',
8             id: 'notes-app-store'
9         },
10         sorters: [{ property: 'dateCreated', direction: 'DESC'}],
11         grouper: {
12             sortProperty: "dateCreated",
13             direction: "DESC",
14             groupFn: function (record) {
16                 if (record && {
17                     return;
18                 } else {
19                     return '';
20                 }
21             }
22         }
23     }
24 });

As of this writing, groupers are not explained very well in Sencha Touch’s documentation. However, it is not difficult to make sense of this config’s properties. The groupFn config is the function used to generate the label for the group. In our case, the label will be the date the notes were taken:

The sortProperty config defines the value that will be used to sort the groups. If you do not include this config, the fields will be sorted based on the value returned by the function defined with the groupFn config. The direction config specifies the direction to sort the groups.

The last change needed to implement grouping consists of adding the grouped config to the NotesList Class:

1 Ext.define("NotesApp.view.NotesList", {
2     extend: "Ext.dataview.List",
3     alias: "widget.noteslist",
4     config:{
5         scrollable:'vertical'
6     },
7     config: {
8         loadingText: "Loading Notes...",
9         emptyText: "</pre>
10 <div class="\&quot;notes-list-empty-text\&quot;">No notes found.</div>
11 <pre>
12 ",
13         onItemDisclosure: true,
14         grouped: true,
15         itemTpl: "</pre>
16 <div class="\&quot;list-item-title\&quot;">{title}</div>
17 <div class="\&quot;list-item-narrative\&quot;">{narrative}</div>
18 <pre>
19 "
20     }
21 });

When we set the grouped config to true, the List will use the groups defined in its store, through the grouper config, to render its items appropriately.

Let’s check how the list looks after we turned on grouping. Start the emulator and confirm that the notes list has date groups similar to the following screenshot:


We just finished building all the features of the Note Editor View by adding both, the ability to delete notes, and the ability to navigate back to the Notes List Container View when the Home Button is tapped.

We also modified the Notes List so the notes are rendered in groups based on the date the notes were saved. This makes it easier for our users to find their notes.

In the next chapter of this series we are going to create a version of the app where the Notes List and Notes Editor Views are defined using config objects, instead of initialize functions.

Stay tuned! :-)


Download the source code for this article:

The Entire Series