Can't get inline data store to work.

[rvelasquez]

Hi,

I'm trying to display a list of items in a tab panel using an inline data store. I have the following code:

Main View:

...
        listeners: {
            show: function() {
                var store = Ext.create('MyApp.store.TeamMembers');
                var teamList = Ext.getCmp('teamList');
                store.load();
                teamList.setStore(store);
                teamList.refresh();
            }
        },
... 
// Second item in tab panel
            {
                title: 'Teams',
                iconCls: 'team',
                xtype: 'list',
                id: 'teamList',
                itemTpl: '<div>{firstname}</div>',


                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Teams'
                    }
                ]
            },

Model:

Ext.define('MyApp.model.TeamMember', {
    extend: 'Ext.data.Model',
    fields: ["firstname", "lastname", "team", "title", "description"]
});

Store:

Ext.define('MyApp.store.TeamMembers', {
    extend: 'Ext.data.Store',


    config: {
        model: 'MyApp.model.TeamMember',
        data: [
            {
                firstname: "Firstname",
                lastname: "Lastname",
                team: "Team",
                title: "Title",
                description: "Description"
            },
            {
                firstname: "Firstname2",
                lastname: "Lastname2",
                team: "Team2",
                title: "Title2",
                description: "Description2"
            }
        ]
    }
});

What's happening is I see a list of two items in the second tab panel but there is no content in either row (I expect to see two rows both populated with a firstname according to the itemTpl configuration.

[iSmartDevice]

http://docs.sencha.com/touch/2-0/#!/...re-method-load

The function "load" is invoked asynchronously.

show: function() {
    var store = Ext.create('MyApp.store.TeamMembers'); 
    store.load({        
        callback: function(records, operation, successful) {
             // the operation object contains all of the details of the load operation
            console.log(records);
        }
    });
}

[rvelasquez]

I tried hooking up the setting of the store and refresh in the load callback but that didn't work. What you're saying makes sense but doesn't explain why the list view is showing two empty rows. If I change the the data property to only have one item then the list view will only show one empty row. So somehow the list view knows how many items I have but doesn't know the content of the items. My itemTpl property is set properly so I'm not sure what's going on.

Screen Shot 2012-06-25 at 6.09.24 AM.png

[iSmartDevice]

I'm not sure why it occurs. Let's do another way to show the list. Do you see the data in the list with the following code?

// app.js
models:['TeamMember'],
stores:['TeamMembers'],

show: function() {
    // Comment out not to load the store here
    /*
    var store = Ext.create('MyApp.store.TeamMembers'); 
    store.load({        
        callback: function(records, operation, successful) {
             // the operation object contains all of the details of the load operation
            console.log(records);
        }
    });*/
}


{
    title: 'Teams',
    iconCls: 'team',
    store: 'TeamMembers',
    xtype: 'list',
    id: 'teamList',
    itemTpl: '<div>{firstname}</div>',




    items: [
        {
             docked: 'top',
             xtype: 'titlebar',
             title: 'Teams'
        }
   ]
 },

[jerome76]

Model:

Ext.define('MyApp.model.TeamMember', {
    extend: 'Ext.data.Model',
    fields: ["firstname", "lastname", "team", "title", "description"]
});

It looks like your definition is wrong, and it may be setting up your model wrong. (I could be wrong though) This is how it should be:

Ext.define('MyApp.model.TeamMember', {
    extend: 'Ext.data.Model',
    config: {
        fields: ["firstname", "lastname", "team", "title", "description"]
    }
});

Try that if nothing else works.