Working With Databound Controls in Sencha Touch 2

Before reading this article please goes through the following articles.

1. Introduction to Sencha Touch 
2. Hello World App using Sencha Touch 2
3. Sample form application using Sencha Touch 2
4. Dealing with containers in Sencha Touch 2

Introduction

In the last article we worked with container controls in Sencha Touch 2. In this article we will have a look towards data-bound controls provided by Sencha Touch. All of us know what data-bound is. As in our first article we saw that Sencha Touch is a mobile application development framework. So here in Sencha Touch we do not have a data-grid kind of controls. But the latest version of Sencha Touch provides a grid control also. So let’s get started with the basic data-bound controls for data.

A. Data-View

Sencha Touch provides a control called Data-view that is very useful for displaying some data from a database or service. Use the dataview component when you need to show a list of mails, list of tweets and so on. Data-view is very useful because it creates many components dynamically. You can design each data-row as needed by applying extra CSS. The following example shows how to create a data-view.

var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['Name', 'Articles'],
data: [
{ Name: 'Mahesh', Articles: 500 },
{ Name: 'DJ', Articles: 500 },
{ Name: 'Dinesh', Articles: 200 },
{ Name: 'Krishna', Articles: 95 }
]
},
itemTpl: '<div>{Name} has written {Articles} on C-sharp corner.</div>'
});
Ext.Viewport.add(touchTeam);

In the above snippet you can see we have created a dataview control by instantiating the Ext.DataView class. A Data-View has many properties as do other controls that we saw in our previous chapters. Here we will discuss a couple of properties that are necessary to create a data-view.

In the first place we have a store. A store is the way to provide a data-source for the databound control in Sencha Touch. In the store we can define static data or pull data from a back-end server. We will see a store in depth when we move to MVC in Sencha Touch. Here for now we will simply display the static data. As in ASP.NET for any data-bound control we provide a datasource property; in Sencha we have the store property to specify the data-source.

In all data-bound controls we have the store property. Next we can see itemTpl, that is one more important property for all databound controls. In itemTpl we can specify how the row will be rendered on the screen. Here we can create a HTML element directly or we can create some XTemplate that we will see in later chapters. For itemTpl you can apply the CSS and make your data-view look good.

B. List

A List is one more important data-bound control in Sencha Touch. If you need to show a contact list then we can use the List control. A List also has the same property as the data-view above has. In the following we will create a simple List with the same store.

var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
store: {
fields: ['Name', 'Articles'],
data: [
{ Name: 'Mahesh', Articles: 500 },
{ Name: 'DJ', Articles: 500 },
{ Name: 'Dinesh', Articles: 200 },
{ Name: 'Krishna', Articles: 95 }
]
},
itemTpl: '<div>{Name} has written {Articles} on C-sharp corner.</div>'
});

One basic difference between a List and a data-view is we have the ability to design a data-view as we need and in the List we can do the same design but the List has its default design of rows builtin. When we create the List it creates a well designed data-row. Here our design work is made easy by the List control. One more advantage of a List is that it has some events like itemTap, double tap and so on that we can use to perform some extra work on the List. For example when you use the List to display contacts or mails and on the clicking of a listitem you need to display the details so we can use an itemTap or double tap event to perform this actions.

C. Index Bar and Grouped List

Sencha provides the List with an index bar and a grouping feature. These days we all use smartphones and are aware of index bars and grouping. The following snippet will create a grouping and an index bar list.

var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
indexBar: true,
grouped:true,
store: {
fields: ['Name'],
data: [
{ Name: 'Amit' },
{ Name: 'DJ' },
{ Name: 'Dinesh' },
{ Name: 'Krishna' },
{ Name: 'Mahesh' },
{ Name: 'Praveen' },
{ Name: 'X' },
{ Name: 'Y' }
],
sorters: 'Name',
grouper: {
groupFn: function(record) {
return record.get('Name')[0];
}
},
},
itemTpl: '<div>{Name} is member of C-sharp corner.</div>'
});
Ext.Viewport.add(touchTeam);

The code snippet above will provide nice output as in the following:

Conclusion

In this article we saw the data-bound controls provided by Sencha Touch. In the next article we will move to MVC in Sencha Touch so stay tuned.