Ext.data.JsonStore + Ext.DataView = not loading records

Question

Hi guys, I'm trying to make a DataView work (on Ext JS 2.3).

Here is the jsonStore, which seems to be working (it calls the server and gets a valid response).

Ext.onReady(function(){

        var prefStore = new Ext.data.JsonStore({
            autoLoad: true,  //autoload the data
            url: 'getHighestUserPreferences',
            baseParams:{
                userId: 'andreab',
                max: '50'
            },
            root: 'preferences',
            fields: [
               {name:'prefId', type: 'int'},
               {name:'absInteractionScore', type:'float'}
            ]
        });

Then the xtemplate:

        var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="{url}" title="{name}"></div>',
                    '<span class="x-editable">{shortName}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
        );

The panel:

        var panel = new Ext.Panel({
            id:'geoPreferencesView',
            frame:true,
            width:600,
            autoHeight:true,
            collapsible:false,
            layout:'fit',
            title:'Geo Preferences',

And the DataView

            items: new Ext.DataView({
                store: prefStore,
                tpl: tpl,
                autoHeight:true,
                multiSelect: true,
                overClass:'x-view-over',
                itemSelector:'div.thumb-wrap',
                emptyText: 'No images to display'
            })
        });
        panel.render('extOutput');
    }); 

What I get in the page is a blue frame with the title, but nothing in it. How can I debug this and see why it is not working?

Cheers, Mulone

Answer 1

Your store doesn't match your template, you copied this just from examples didn't you :P

The items in the template, {name} etc refer to fields in the store, which in your case is just prefId and absInteractionScore.

What that example template expects is a name and a url to an image which it then constructs some and an for.