Question

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?

Answer 1

Your store doesn’t match your template, you copied this just from examples didn’t you 😛

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.