使用extjs 3.4 panel + dataview + jsonstore检索数据

Question

i'm trying to show some data via dataview, but for some reason i am getting an emptytext message (No data). Here is my dataview:

xtype        : 'dataview',
emptyText    : 'No data',
id           : 'cartdata',
multiSelect  : true,
plugins      : new Ext.DataView.DragSelector( { dragSafe : true } ),
store        : new Ext.data.JsonStore({
    url           : '/aecms/user-photos-view/',
    autoLoad      : true,
    root          : 'data',
    fields        : [
    'images'
    ],
    listeners : {
        scope : this,
        load  : function(store) {
            var data = store.reader.jsonData;
            if (data.systemMessage) {
                infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
            }
        } 
    } 
}),
tpl          : new Ext.XTemplate(
    '<tpl for=".">',
    '<tpl for="images">',
    '<a title="{id}">test</a>',
    '</tpl>',
    '</tpl>'
    )

and this is a data from php:

{"data":{"images":{"id":"2"}},"status":"success"}

I am new to extjs and appreciate any help.

Answer 1

By the looks of it you are not returning a successProperty value correctly. Change the response from you php code to be, as listed below.

The default successProperty of the JsonReader on your store is 'success'. ExtJs will look for this property in your server response.

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader-cfg-successProperty

Also, you will probably want to return your data as a json array, not an object. You dont need the image object inside the data array.

Server response:

{ "data":[{"id":"2"}], "success":true }

Javascript:

    ...
store        : new Ext.data.JsonStore({
    url           : '/aecms/user-photos-view/',
    autoLoad      : true,
    root          : 'data',
    fields        : [
    'id'
    ],
    listeners : {
        scope : this,
        load  : function(store) {
            var data = store.reader.jsonData;
            if (data.systemMessage) {
                infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
            }
        } 
    } 
})
tpl: new Ext.XTemplate(
    '<tpl for=".">',
    '<a title="{id}">test</a>',
    '</tpl>'
)