Creating a simple List in Sencha Touch 2.0

Creating a simple data list in Sencha Touch 2.0 has changed over the way we used to create data lists in Sencha 1.0.  Changes have been made in the way a data Model is created and the data fields are defined, but the overall concept remains the same.  Here is a quick tutorial along with a demo,

Demo Link : http://jbk404.site50.net/sencha/datahandling/ (might take some time to load, my server is horribly running slow)

I have talked about Model, Stores, Proxies in details in some of my previous posts – writing your first sencha 1.0 app – part3, customizing list control

Creating the data Model

Ext.define('Contacts',{
  extend:'Ext.data.Model',
  config: {
    fields:[
      {name:'firstName' ,type:'string'},
      {name:'lastName', type:'string'} ,
      {name:'contactno', type:'string'},
      {name:'address', type:'string'}
    ]
  }
});

Sencha Touch 2 uses the Ext.define() method to create a model and it extends the Ext.data.Model class for that. The data fields are now defined within the config property.

Creating the data Store

This remains same as Sencha 1.0.

var contactStore = Ext.create('Ext.data.Store', {
  model:'Contacts',
  proxy:{
    type:'ajax',
    url:'data/contacts.json',
    reader:'json'
  },
  autoLoad:true
});

I have used an Ajax proxy to load the external json data file. The reader: ‘json’ property specifies that it will use a json parser to parse the json file.

Defining the item template

Item templates are created by using the Ext.XTemplate class and it will define the look and feel along with what fields you will be displaying in each of your list item. For a detailed tutorial check this out.

var itemTemplate = new Ext.XTemplate(
  '<tpl for=".">',
  '{firstName} {lastName}',
  '</tpl>'
);

For my example I have created a simple template that will display the first name and the last name.

Creating the List control

In Sencha 2.0, the List control is defined in the Ext.dataview.List class. This is how to create a data List,

var contactList = Ext.create('Ext.dataview.List',{
  title: 'Contact List',
  store: contactStore,
  itemTpl: itemTemplate
});

The List uses the contact store that we created earlier. This will provide it the data. The item template defines which fields will be displayed in each row of the List. We can add html tags to the item template to give it a custom look.

Now that our List is ready we have to add it to our main view – a container.

Adding List to main view

For the example I have used a tabbed panel to add the List. You can use other containers for the same.

Ext.create('Ext.tab.Panel',{
  fullscreen:true,
  items:[contactList]
});

This will add our List to the tabbed panel and then displayed on to the page.

Here is the link to the demo once again: http://jbk404.site50.net/sencha/datahandling/

Full java script code can be found in data.js file.

The json data that I used

Below is the content of the contacts.json file

[
{firstName: 'Pearlie', lastName: 'White', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'John', lastName: 'Suttle', contactno:'011-7658740', address:'Donut Avenue, Bill\'s Palace, Washington'},
{firstName: 'Javier', lastName: 'Henderson', contactno:'011-9865460', address:'365-Andrews Street, CA'}, //keeping the data same for demo purpose
{firstName: 'Young', lastName: 'Alverd', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'Billy', lastName: 'Artega', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'Dona', lastName: 'Bigglker', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'Alfred', lastName: 'Blackburn', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'Trenton', lastName: 'Bollinger', contactno:'011-9865460', address:'365-Andrews Street, CA'},
{firstName: 'Tom', lastName: 'Foose', contactno:'011-9865460', address:'365-Andrews Street, CA'}
]