Introduction to Models
In this Sencha Touch 2 tutorial we are going to learn how to create a model, and how to edit model instances.
In general, a Sencha Touch application will consist of one or more views, one or more models and stores, and one or more controllers. Views have a dual role: they render representations of the data in the models, and capture and transmit user input to the controllers. Controllers will translate the user’s input into changes in the data and/or the behavior of the application. Models represent the application’s data and state.
Creating and Editing Model Instances
A Sencha Touch 2 model inherits from the Ext.data.Model class. Let’s create a hypothetical model to represent a hotel. First, let’s set up a sample application with a set of directories like this:
Then, our index.html file, which should include references to the framework’s files in its head section:
<link href="../../../lib/st2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../lib/st2/sencha-touch-debug.js"></script>
<script type="text/javascript">
// Application goes here.
</script>
Now, in the Hotel.js file, let’s define the Hotel model as follows:
Ext.define('App.model.Hotel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'status', type: 'int' }
]
}
});
In the index.html file, we are going to define our application with the following code:
Ext.application({
name: 'App',
models: ['Hotel'],
launch: function () {
var myHotel = Ext.create('App.model.Hotel', {
id: 1,
name: 'Siesta by the Ocean',
address: '1 Ocean Front, Happy Island',
status: 1
});
// Getting a field's value.
console.log('Hotel name is ' + myHotel.get('name'));
// Setting a field's value.
myHotel.set('status', 0);
var statusMsg = 'Active';
if (myHotel.get('status') === 0) {
statusMsg = 'Inactive';
}
console.log('Hotel is ' + statusMsg);
}
});
If we open the index.html in a WebKit browser and examine the JavaScript console, we will see an output like this:
In Detail
The first detail we need to look at is how we declare a model. This happened in the Hotel.js file. In one of its most basic forms, a model consists of a set of fields, defined inside the class’ config object:
Ext.define('App.model.Hotel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'status', type: 'int' }
]
}
});
The next detail is how we make the application aware of a model. This happens in the app’s models config:
models: ['Hotel']
This will cause the application to load the model’s file, Hotel.js, for us. We did not have to include this file in the index.html file.
After we do this, we create an instance of the model inside the launch function:
var myHotel = Ext.create('App.model.Hotel', {
id: 1,
name: 'Siesta by the Ocean',
address: '1 Ocean Front, Happy Island',
status: 1
});
Acquiring the value of a field is accomplished via the model’s get function:
// Getting a field's value.
console.log('Hotel name is ' + myHotel.get('name'));
Setting a field’s value is equally easy using with set function:
// Setting a field's value.
myHotel.set('status', 0);
What’s Next
In the next article of this series we will continue our tour of Sencha Touch 2 models. Stay tuned!
Want To Learn More?
My Sencha Touch books will teach you how to create a Sencha Touch application, step by step, from mockups to production build.
About Jorge
