Can't get mode / store to read a complex data structure with paging toolbar

[radtad]

I'm trying to load in a complex nested structure with a paging store. I noticed another thread where something similar was done, but can't seem to get a totalProperty count on the paging toolbar. The data returns just fine in the view.

http://www.sencha.com/forum/showthread.php?144855-load-nested-rows-in-model&highlight=nested+data+store+load (http://www.sencha.com/forum/showthread.php?144855-load-nested-rows-in-model&highlight=nested+data+store+load)


Note: I can't change the the JSON data coming back in as it isn't mine.



Ext.define('RH.model.mrln.PagedThumbnails', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name:'id', type:'integer', mapping: 'id'},
{name:'mediatype', type:'string', mapping: 'mediatype'},
{name:'size', type:'integer', mapping: 'size'},
{name:'name', type:'string', mapping: 'name'},
{name:'job', type:'string', mapping: 'job'},
{name:'description', type:'string', mapping: 'description'},
{name:'visible', type:'boolean', mapping: 'visible', defaultValue: true},
{name:'format', type:'string', mapping: 'format'},
{name:'length', type:'string', mapping: 'length'},
{name:'owner', type:'string', mapping: 'owner'},
{name:'uploaddt', type:'date', mapping: 'uploaddate', dateFormat: 'U', convert: function(v,record) {return Ext.isString(v) ? v : v.time;} },
{name:'contenttype', type:'string', mapping: 'contenttype'},
{name:'leaf', type:'boolean', defaultValue: true},
{name:'isdir', type:'boolean', defaultValue: false},
{name:'parentdir_id', type: 'integer', mapping: 'parentdir_id'},
{name: 'online', type: 'boolean', defaultValue: false}
]
});

Ext.define('RH.store.mrln.PagedThumbnails', {
extend: 'Ext.data.Store',
model: 'RH.model.mrln.PagedThumbnails',
remoteSort: false,
proxy: {
actionMethods: { read: 'POST'},
headers: {'Content-Type': 'application/json; charset=utf-8' },
type: 'ajax',
noCache: false,
url: 'data.json',
reader: {
type: 'json',
root: 'contents',
totalProperty: 'count',
extractData: function(root) {
var data = root[0].contents;
return Ext.data.reader.Reader.prototype.extractData.call(this, [data]);
}
}
}
});

var me = this;
var store = Ext.create('RH.store.mrln.PagedThumbnails');
store.load({
params: {
method: 'getList'
}
});





{
xtype: 'pagingtoolbar',
store: 'RH.store.mrln.PagedThumbnails',
dock: 'bottom',
displayInfo: true

}





[
{
"pid": 3437,
"count": 8,
"contents": [
{"id": 1501111,"mediatype": "jpg","size": 195387,"name": "Test","description": "types: jpg","format": "","length": 0,"owner": "trubenda","uploaddate": {"time": 1326931109},"contenttype": "media","job": "test","visible": true,"online": true}
]
}
]

[dedoz]

recenlty i had a similar issue with total property,
here is how i solved, hope this helps you

http://www.sencha.com/forum/showthread.php?195487-Store-Grid-Paging

Actually that prolly wont help you, since you cant change the JSON response,
also i was using Ext Direct proxy, not ajax D:

[radtad]

recenlty i had a similar issue with total property,
here is how i solved, hope this helps you

http://www.sencha.com/forum/showthread.php?195487-Store-Grid-Paging

Actually that prolly wont help you, since you cant change the JSON response,
also i was using Ext Direct proxy, not ajax D:

I'll check it out and see if there is something I can use in there. Thanks!
I guess another solution might be to explicitly set the total somehow.

[vietits]

Try this:


Ext.define('RH.store.mrln.PagedThumbnails', {
extend: 'Ext.data.Store',
model: 'RH.model.mrln.PagedThumbnails',
remoteSort: false,
proxy: {
actionMethods: { read: 'POST'},
headers: {'Content-Type': 'application/json; charset=utf-8' },
type: 'ajax',
noCache: false,
url: 'data.json',
reader: {
type: 'json',
root: 'contents',
totalProperty: '[0].count',
extractData: function(root) {
var data = root[0].contents;
return Ext.data.reader.Reader.prototype.extractData.call(this, [data]);
}
}
}
});

Or this


Ext.define('RH.store.mrln.PagedThumbnails', {
extend: 'Ext.data.Store',
model: 'RH.model.mrln.PagedThumbnails',
remoteSort: false,
proxy: {
type: 'ajax',
actionMethods: { read: 'POST'},
headers: {'Content-Type': 'application/json; charset=utf-8' },
noCache: false,
url: 'data.json',
reader: {
type: 'json',
root: 'contents',
totalProperty: 'count',
getResponseData: function(response){
var data = Ext.decode(response.responseText) || [];
return data[0];
}
}
}
});

[radtad]

The first seems to work! Awesome! The second breaks. I'm going to have to do some more research tomorrow just to make sure. I didn't know you could use an index in a string like that.

[vietits]

I have tested both and they worked well for me on Chrome, Ext 4.0.7. Below is another solution for your case:


Ext.define('RH.store.mrln.PagedThumbnails', {
extend: 'Ext.data.Store',
model: 'RH.model.mrln.PagedThumbnails',
remoteSort: false,
proxy: {
type: 'ajax',
actionMethods: { read: 'POST'},
headers: {'Content-Type': 'application/json; charset=utf-8' },
noCache: false,
url: 'data.json',
reader: {
type: 'json',
root: 'contents',
totalProperty: 'count',
getData: function(data){
return Ext.isArray(data) ? data[0] : data;
}
}
}
});

[radtad]

It might have something to do with the nested uploaddate: {time: 1213213123}. I'll let you know tomorrow. Thanks for your help!

[radtad]

This is probably the best answer since I'm not messing with a private method this way. A lot cleaner too. Thanks!


I have tested both and they worked well for me on Chrome, Ext 4.0.7. Below is another solution for your case:


Ext.define('RH.store.mrln.PagedThumbnails', {
extend: 'Ext.data.Store',
model: 'RH.model.mrln.PagedThumbnails',
remoteSort: false,
proxy: {
type: 'ajax',
actionMethods: { read: 'POST'},
headers: {'Content-Type': 'application/json; charset=utf-8' },
noCache: false,
url: 'data.json',
reader: {
type: 'json',
root: 'contents',
totalProperty: 'count',
getData: function(data){
return Ext.isArray(data) ? data[0] : data;
}
}
}
});