Results 1 to 8 of 8

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

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Answers
    1
    Vote Rating
    1
      0  

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

    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



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

    Code:
    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'
        }
    });
    Code:
    {
                        xtype: 'pagingtoolbar',
                        store: 'RH.store.mrln.PagedThumbnails', 
                        dock: 'bottom',
                        displayInfo: true
                        
    }
    Code:
    [
        {
            "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}
            ]
        }
    ]

  2. I have tested both and they worked well for me on Chrome, Ext 4.0.7. Below is another solution for your case:
    Code:
    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;
                }
            }
        }
    });

  3. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Answers
    13
    Vote Rating
    10
      0  

    Default

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

    http://www.sencha.com/forum/showthre...re-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:

  4. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Answers
    1
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by dedoz View Post
    recenlty i had a similar issue with total property,
    here is how i solved, hope this helps you

    http://www.sencha.com/forum/showthre...re-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.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    Try this:
    Code:
    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
    Code:
    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];
                }
            }
        }
    });

  6. #5
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Answers
    1
    Vote Rating
    1
      0  

    Default

    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.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    I have tested both and they worked well for me on Chrome, Ext 4.0.7. Below is another solution for your case:
    Code:
    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;
                }
            }
        }
    });

  8. #7
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Answers
    1
    Vote Rating
    1
      0  

    Default

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

  9. #8
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Answers
    1
    Vote Rating
    1
      0  

    Default

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

    Quote Originally Posted by vietits View Post
    I have tested both and they worked well for me on Chrome, Ext 4.0.7. Below is another solution for your case:
    Code:
    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;
                }
            }
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •