Extjs DataView ArrayStore problem

Question

Hi

I have the following JS:

http://monobin.com/__m1c171c4e

and the following code:

Code:

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

var store = new Ext.data.ArrayStore({
    fields: [{ name: 'name' }, { name: 'ImageMedium'}],
    data: res.data.SimilarArtists
});

var panel = new Ext.Panel({
    frame: true,
    width: 535,
    autoHeight: true,
    collapsible: true,
    layout: 'fit',
    title: 'Simple DataView (0 items selected)',
    items: new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight: true,
        multiSelect: true,
        overClass: 'x-view-over',
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        prepareData: function (data) {
            data.Name = Ext.util.Format.ellipsis(data.Name, 15);
            return data;
        },

        plugins: [
            new Ext.DataView.DragSelector(),
            new Ext.DataView.LabelEditor({ dataIndex: 'name' })
        ],

        listeners: {
            selectionchange: {
                fn: function (dv, nodes) {

                }
            }
        }
    })
});

So binding the DataView to the child array of res.data.SimilarArtists

But nothing seems to happen?

prepareData doesnt even get called?

What am i doing wrong?

w://

Answer 1

The data structure you've linked to is JSON, not array data. Try switching to a JsonStore instead. Note that a JsonStore is preconfigured with a JsonReader and an HttpProxy (remote data source) and is intended for loading the data from a url. If you need JSON loaded from local data, then you'll have to create a generic store with a JsonReader and MemoryProxy.