Monday 22 April 2013

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

13 comments:

  1. What if I have many records in my store (count is not known until loaded) and I want to show them as horizontally scrolling list in such 2 row layout?

    ReplyDelete
    Replies
    1. Hi Floyd,

      You can try getRange() method available in Ext.data.Store Class. But unless you load the store, model data won't be available.

      Thanks

      Delete
    2. My question was more towards what CSS should I use if I want to show horizontal list with 2/3 rows per column

      Delete
    3. Hi Floyd,

      In DataView component, Please add this below configurations
      config{
      width: null,
      inline: {
      wrap: false
      },
      scrollable: {
      direction: 'horizontal',
      directionLock: true
      }
      }
      Hope this helps Thanks

      Delete
  2. hi you. I'm updated your store.js by adding many items. But in myContainer, I can't scroll vertically to see all of them. I only see six first items. Can you help me?
    Here code:
    xtype: 'dataview',
    height: '100%',
    styleHtmlContent: true,
    width: '100%',
    inline: {
    wrap: true
    },
    layout:'fit',
    scrollable: {direction:'vertical'},
    itemCls: 'dataview-item',

    ReplyDelete
    Replies
    1. please remove height:100% and try out. hope this will helps thanks

      Delete
  3. Hi, I tried using your code for my application but the size of each cell varies depending on the size of the content in the cell. How can I make it constant?

    ReplyDelete
  4. Hi, I tried using your table dataview layout for an app that I am making. I have text and images present in the layout. I have observed that the size of individual cell doesn't remain the same. If a particular cell has more text compared to the other cells, then that cell size becomes more than the other cells and the cell that was supposed to be present below that cell is pushed to the next row.

    Can you please tell me how to fix the size of each cell to the size of the largest cell

    ReplyDelete
    Replies
    1. Hi Vineeth,
      You need to add the following CSS properties in the 'dataview-item' CSS class name

      max-width: '33.33%';
      overflow: 'hidden';

      Please let me know, if you see any issues.

      Thanks and Regards,
      Suresh Kumar A

      Delete
  5. Hi,

    I have to add and delete row to a table on button click in sencha touch 2.So far i am able to produce static rows.

    could you tell me how to do it?i am new to sencha touch.

    Regards,
    K. Sharma

    ReplyDelete
    Replies
    1. Hi Sharma,

      First, create a Data View Component with itemTpl containing table, tr, td tags
      similar to below (Eg)

      table
      tpl for="."
      tr
      td {col1} /td
      td {col2} /td
      td {col3} /td
      /tr
      /tpl
      /table

      Then, create a store with the fields 'col1,col2,col3'. Then based on Add/Delete button
      add and delete records in to the store.

      Finally, assign the store to the DataView Component.

      Hope, this helps!.

      Thanks and Regards,
      Suresh Ariya

      Delete
  6. Hi.. Thanks for this.
    Is it possible to show all panels together? Basically is there a way to group elements of the data view and be shown?

    ReplyDelete
    Replies
    1. Hi,

      Thanks for contacting me. Can you please provide more info . The info here is minimal.

      Thanks
      Suresh Ariya

      Delete

Related Posts Plugin for WordPress, Blogger...