Search code examples
sencha-touch-2

Can't Get View to Display Store Data in Sencha Touch


I'm trying to display a list of simple data in Sencha-Touch 2. For some reason, It's not displaying the data and I'm unable to figure it out. I'm getting two title bars: the correct title with "Recent Posts" and a blank one underneath. I don't know why it is coming like this. Perhaps that's conflicting with the rest of the display?

Ext.define('GS.view.NewBlog',{
    extend: 'Ext.navigation.View',
    xtype: 'newblog',
    requires: [
        'Ext.dataview.List',
           'Ext.TitleBar'
    ],

config: {
    title: 'Blog',
    iconCls: 'star',
            items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Recent Posts'
            }, // end items
            store: {
                fields: ['title','author'],
                data: [
                    {title: 'This is the first Title', author: 'John Smith'},
                    {title: 'This is the second title', author: 'Jane Doe'}
                ] // end data
            } // end store

    }, // end config
itemTpl: '{title}' 
});

Solution

    1. Title Bar is showing twice because you are using Ext.navigation.View, which by default has titlebar. And you are adding one more title bar in the items.

    2. Now define store and itemtpl inside an item, within config. You can define store seperately and mention the id of the store inside store.

      items : [{ xtype : 'list', store: 'store id goes here, itemTpl: '{title}' }]