Sencha Dataview with Store not showing

Question

I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.

Here follow my code:

On my app.js on the launch part:

Ext.define('SocializeApp.model.Friends', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name:'name' ,type:'string'},
                {name:'id' ,type:'string'},
                {name:'img' ,type:'string'}
            ]
        }
    });
    Ext.define('SocializeApp.store.FriendStore', {
        extend: 'Ext.data.Store',
        config: {
            model: 'SocializeApp.model.Friends',
            storeId: 'FriendStore',
            proxy: {
                type: 'ajax',
                url: 'http://socialize.localhost.com/friends.php',
                reader: {
                    type: 'json',
                    rootProperty: 'friends'
                },
                autoLoad: 'true'
            },

        }
    });

    Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));

In the Main.js

  Ext.define('SocializeApp.view.Main', {
    extend: 'Ext.tab.Panel',
    fullscreen: true,
    xtype: 'main',
    requires: ['Ext.TitleBar'],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'Amigos',
            iconCls: 'team',
            items: [{
                xtype: 'dataview',
                store: 'FriendStore',
                scrollable: {
                    direction: 'vertical'
                },
                tpl: ['{img} {id} {name}']
            }]
        }, {
            title: 'time',
            iconCls: 'time',
            items: [{
                html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
            }]
        }, {
            title: 'Interesses',
            iconCls: 'bookmarks',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Getting Started'
            }, {
                xtype: 'video',
                url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }]
        }]
    }
});

I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.

FYI the JSON

{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}

I really appreciate any help.

Thx,

Answer 1

Try these (code has the ideas combined).

1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.

2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')

3 - Are you using MVC? did you declare your stores /models in your app.js?

Ext.application({
     name: 'yourapp',
     stores: ['FriendStore'],
     models: ['Friends'],
     launch: function() {   
          ...
     }
});

4 - Or, just thought of this.. change your tpl to 'itemTpl'

Ext.define('SocializeApp.view.Main', {
    extend: 'Ext.tab.Panel',
    fullscreen: true,
    xtype: 'main',
    requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'Amigos',
            iconCls: 'team',
            items: [{
                itemId: 'FriendsDataview',
                xtype: 'dataview',
                store: Ext.getStore('FriendStore'),
                scrollable: {
                    direction: 'vertical'
                },
                itemTpl: ''.concat(
                    '<div>{img} {id} {name}</div>'
                )
            }]
        }, {
            title: 'time',
            iconCls: 'time',
            items: [{
                html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
            }]
        }, {
            title: 'Interesses',
            iconCls: 'bookmarks',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Getting Started'
            }, {
                xtype: 'video',
                url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }]
        }]
    },

    initialize: function(){
        var store = Ext.getStore('FriendStore');
        var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
        dv.setStore(store);
        store.load(function(){
            console.log(this); 
        });
    }
});