Sencha Touch supports MVC architecture that reduces the development time and improves the application's performance. Also, it's very easy to add new features to the application while using MVC. There are several components of MVC.
In this section we will build a sample application with the MVC structure. First, we will see how to configure your application for that. We specify all the controllers, models, stores, and views in the application config. First of all, create the mvc-demo
folder in your web server and copy all the Sencha Touch resources to it. Check out the following steps to start developing a sample application:
Create a folder named mvc-demo
.
Create a folder in mvc-demo
and name it app
.
Create the following four folders inside the app
folder:
model
view
controller
store
We will build a simple application to manage contacts. This application will first display a list of contacts when it's launched. A user can select a contact to view the details. First of all, create the app.js
file and add the following code to it:
This code snippet will create the Contacts application. Here we have specified the following four new configs in the application.
models
stores
views
controllers
Here we specify the names of all the models, views, stores, and controllers. Ext.Loader
will load all the files from the respective folders. Ext.Loader
always works with a predefined path. It always assumes that all the models specified here will be available in the app/model
folder with the respective filenames. That's why it's very important to give an exact name to files and folders. Now let's create a model. Create a new file with the name Contact.js
in the app/model
folder and add the following code to it:
The preceding code snippet will define a contact model by extending the Ext.data.Model
class with some fields specified in the fields
config. Now create a new file with the name ContactsStore.js
in the app/store
folder and add the following code to it:
The preceding code snippet will create a store by extending the Ext.data.Store
class with some predefined data in the store. Now we will create our main view. Create a new file in the app/view
folder with the name MainView.js
and add the following code to it:
This code will create a main view of the application by extending the Ext.Panel
base class. We have added an item in the main view at the start. Note that the xtype
attribute of this view is specified as mainview
. It is a user-defined xtype
attribute. Now let's create a child view. Create a new file named ContactList.js
in the app/view
folder and add the following code to it:
This code will create our list with all the contacts. This view has a toolbar and a list as items. We have used this view's xtype
attribute to add it to MainView
. This view will display a list of all the contacts with the names. We can change the template the way we want. Now we will display the details of a specific contact that is selected from the list. For this, we have to create a separate view, and we will control that view from the controller. Create a new file with the name ContactView.js
in the app/view
folder and add the following code to it:
The preceding code snippet will create a panel with a toolbar and a panel that has a template defined with the tpl
config to show the details of the contact. In this code snippet, we have used the ui
config with a button. Sencha Touch has some predefined user interfaces for some of the components. The ui
config will define the look and feel of the components. Now let's create a controller. Create a new file with the name ApplicationController.js
in the app/controller
folder and add the following code to it:
The preceding code snippet will create a controller with the necessary references and event handlers. Please check the refs
config of the controller. We have added references of our view with the xtype
attributes and itemId
. The reference with xtype
is added with the name of the xtype
attribute, while the reference with itemId
is added with the #
prefix. This is how we can add a reference to the view or items of the views with xtype
, itemId
, or id
in the controller. Sencha Touch generates a getter function for each reference we have added. For example, to get an active instance of mainview
, we can use the getMainView()
function. We can also add a reference with a component query. For example, refer to the following line of code:
This line of code will add a reference of the child panel item of panel
with the item ID mypanel
.
The this.control
section defines the actions or event handlers for the user events. We use the reference we added in the refs
section to define events and event handlers to it. For example, refer to the following code snippet:
Here we have added a select event, and the event handler is the onContactSelect
function. Here, onContactSelect
should be available in the same controller file. This way we can define more than one event and handlers for a single component. Here all the functions execute in the scope of the controller. So this keyword always returns an instance of the controller. So in the preceding code snippet, onContactSelect
will be invoked with some params when the user selects any record in the list. When a user selects any record, we create a contact view panel if it's not already created, and set the data for the template so that it will display details of the selected contact. The user can go back to the list again by tapping on the back button in this view. goBackToContactList
is the function executed when the user taps on the back button. Here we have used the animateActiveItem
function to show the view with animation. So in this way, we can add a number of references to views in controllers and define event handlers for the components in controller files.