The data package in Sencha Touch and ExtJS is awesome. Models let you easily and robustly configure your data structures and easily use them in all sorts of components. One of the model features that have a lot of potential but are used and understood relatively poorly are model associations. One of the most interesting uses of associations is that they allow you to use parent data when using the model in components. In practice this can be quite hard to accomplish however when all stores load their own data. In this blogpost I will show how to use parent (belongsTo) relations to automatically fetch and use parent data.
In this article you will learn how to use the hasMany association, a feature of Sencha Touch models that allows you to connect two models in a one-to-many relationship. The model configs you will learn about in this post are the following:
The back-end code for this tutorial is in PHP. I also published a version of this Sencha Touch tutorial using C#
Let’s create a simple Sencha Touch application with the following files:
In this series we will create the Sencha Touch 2 version of the Notes Application, an application that allows its users to take notes and store them on the device running the app. Along the way, we will dive into the following areas:
- The building blocks of a Sencha Touch application.
- How to implement navigation in an application with multiple views.
- How to edit data using Sencha Touch form elements.
- How to render information using lists views.
- How Sencha Touch stores data with HTML5 local storage.
In the first part of the series, we are going to define the features of the application, its look and feel, and we will start building its main screen.
In this second part of the tutorial on how to build a Sencha Touch 2 application we will continue building a small application that allows people to save notes on the device running the app.
So far, we have been working on the View that renders the list of notes cached on the device:
In this third part of this tutorial on how to create a Sencha Touch application, we are going to create the Note Editor View. This is the View that will allow our users to create, edit and delete notes.
When we finish this article, our application will have the ability to create notes, and edit existing notes. Let’s get started building the Note Editor View.
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
Many of the readers of this tutorial on how to build a Sencha Touch Application have requested a version of the Notes Application that shows how to create components using the config object, instead of the initialize function. In this chapter of the tutorial, we are going to do just that.
Using Sencha Touch’s Config Object to Create the Notes List
The first step we are going to take is consolidate the Notes List Container View and Notes List View into a single View, which we will call Notes List View. This View has the same components that used to exist in the former Views: