How to display DataView component in Table Format on Sencha Touch 2

In Sencha Touch 2, DataView component is used to display the set of same component many times. For examples in apps like these:

• List of messages in an email app
• Showing latest news/tweets
• Tiled set of albums in an HTML5 music player

DataView uses store for fetching the data and render it using itemTpl configuration. Today, we are going to see, how we are going to display the DataView component in Table Format.

Create a Store

First, we are going to create a Store that contains Headline, Content, Author as fields using fields configuration and array of Objects using data configuration. For Demonstration purpose, i added Sencha Components with descriptions as array of objects.

Ext.define('MyApp.store.ArticleStore', {
    extend: 'Ext.data.Store',
    alias: 'store.articlestore',

    config: {
        data: [
            {
                Headline: 'Panel',
                Author: 'Sencha',
                Content: 'Panels are most useful as Overlays - containers that float over your appl..'
            },
            {
                Headline: 'FormPanel',
                Author: 'Sencha',
                Content: 'The Form panel presents a set of form fields and provides convenient ways..'
            },
            {
                Headline: 'Component',
                Author: 'Sencha',
                Content: 'Most of the visual classes you interact with in Sencha Touch are Componen..'
            },
            {
                Headline: 'Store',
                Author: 'Sencha',
                Content: 'he Store class encapsulates a client side cache of Model objects. Stores..'
            },
            {
                Headline: 'Model',
                Author: 'Sencha',
                Content: 'A Model represents some object that your application manages. For example..'
            },
            {
                Headline: 'Controller',
                Author: 'Sencha',
                Content: 'Controllers are responsible for responding to events that occur within yo..'
            }
        ],

        storeId: 'articlestore',
        fields: [
            {
                name: 'Headline'
            },
            {
                name: 'Content'
            },
            {
                name: 'Author'
            }
        ]
    }
});

Creating a DataView Component

Now, we are going to create a DataView component with toolbar positioned top using docked property.Also we have assigned the above registered store (ArticleStore) to the DataView using storeId configuration.

Using itemTpl configuration, we are defining the HTML Template with variables wrapped inside curly braces{}. The values for these variables are already defined in store using data configuration.
Each data items from the Store will be looped and displayed as items in the DataView using the itemTpl configuration. In itemCls configuration, we are defining the CSS Class that needs to apply for each item in dataview.

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'dataview',
                height: '100%',
                styleHtmlContent: true,
                width: '100%',
                layout: {
                    type: 'fit'
                },
                inline: {
                    wrap: true
                },
                itemCls: 'dataview-item',
                itemTpl: [
                    '<div class="arHeadline">',
                    '    {Headline}',
                    '</div>',
                    '<div class="arbyline">',
                    '    {Author}',
                    '</div>',
                    '<div class="arcontent">',
                    '    {Content}',
                    '</div>'
                ],
                store: 'articlestore'
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Summary'
            }
        ]
    }
});

CSS Styles

CSS Class definitions that we added in itemTpl configuration.

.dataview-item{
   width : 33.33%;
   height : 50%;
   border-right: 1px solid #000;
   border-bottom: 5px solid #59535E;
   float:left;   
   padding:2px;
}

.arHeadline{
    font-size: 16px;
    font-weight:bold;
    overflow:hidden;
    font-family: 'Museo Sans';
    color: #66ab16;
}

.arbyline{
    font-size:10px;
    font-style:italic;
    font-family: 'Museo Sans';
}

.arcontent{
    font-size:12px;
    font-family: 'Museo Sans';
    margin: 2px;
    overflow: hidden;
}

When we run this code in Google Chrome, Following is the output

You will be able to see the DataView components are displayed horizontally one after another in Table Format. Hope, you enjoyed this Post.

Download The Source Code