Working With Databound Controls in Sencha Touch 2

Before reading this article please goes through the following articles.

Introduction

In the last article, we worked with container controls in Sencha Touch 2. In this article, we will have a look at 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.

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, a 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 data-bound 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 data source 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, which is one more important property for all data-bound controls. In itemTpl we can specify how the row will be rendered on the screen. Here we can create an 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.

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 these actions.

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.