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'} ]
Hi there, seems your demo link is not working (as at Jun 18th 16h00 – GMT+2)
Okay …working now (“,)
how can i be able to get the same but fetching data from a server … lets say my url prints out the json output
You can get the data from the server, there are several proxies in Sencha that you can use- try AjaxProxy, JSONProxy. Have a look at the Sencha Docs. That should help you out.
Thanks
[…] 1. See how to create a simple List in Sencha Touch 2.0 : http://jbkflex.wordpress.com/2012/06/18/creating-a-simple-list-in-sencha-touch-2-0/ […]