Paging Plugin Determine No More Data

[stephensaw]

Hi,

I'm using paging plugin, and triggering from controller to load the data, it works great, but how to I let the paging plugin know that no more data is loaded, and stop displaying the load more text?

My store:

Ext.define("TestSencha.store.Product", {    
    extend: "Ext.data.Store",
    requires: ["TestSencha.model.Product", "Ext.data.proxy.JsonP"],
    config: {        
        model: "TestSencha.model.Product",        
        proxy: {            
            type: "scripttag",            
            method: "post",           
            url: "http://localhost:8888/TestSencha/Product.php",            
            reader: {                
                type: "json",                
                rootProperty: "products"            
            }        
     },        
         autoLoad: false    
     }
}); 

The view:

Ext.define("TestSencha.view.ProductList",{    
    extend: "Ext.dataview.List",    xtype: "productlist",
    requires: ["Ext.plugin.ListPaging"],
    config: {        
    store: "Product",         
    plugins: [{                
        xclass: "Ext.plugin.ListPaging",                
        autoPaging: false            
    }],
        itemTpl: [ "{name}" ]
    }
}); 

Sample of result with data:

<script>Ext.data.JsonP.callback1({"products":[{"id":"1","name":"Product A"}]});</script>

Sample of result without data:

Ext.data.JsonP.callback1({"products":[]});

Part of my PHP code that returning result:

if (isset($_REQUEST["callback"])) {    
    header("Content-Type: text/javascript");    
    echo $_REQUEST["callback"]. "(" .json_encode($result). ");";
}else {   
    header("Content-Type: application/x-json");    
    echo json_encode($result);
} 

I suspect the way how I return my JSON from server does not appear as empty result to the paging store, but couldn't figure out how to fix that. Hope someone can shed some light on this.

Thanks.

[edspencer]

We actually did it this way intentionally - just because there's no more data at one time doesn't necessarily mean that there won't be any next time you try to retrieve it. If we hid the Load More UI then you'd never be able to load any more data after an empty response, even though there could very well be more data on the server immediately afterwards.

If your situation really does guarantee that there will be no more data then you could probably just hide the Load More component with something like:

listPagingPlugin.getLoadMoreCmp().hide();

[stephensaw]

Ah, you got your point there, never thought of that scenario.

I saw there is "noMoreRecordsText" in the config for list paging in the documentation, is that config is for the situation where I'm sure that the server does not have anymore data to be loaded (maybe for a low traffic or small user base app)?

I think I'll leave it as how it been designed by you guys, but if I want to show some UI cue to the user tell them that no new data loaded when the user tap on the Load More, how can I achieve that? I couldn't find much example on the plugin.

Thanks.

[edspencer]

Yes exactly right - it should switch to that text when it gets no more data from the server. This tells the user that there's nothing else to load but still allows them to tap on the component to force a load attempt

[stephensaw]

But from the example code I posted, the noMoreRecordsText did not show up, it remain "Load More...". Can you share some example or maybe can point out what went wrong with my codes.

I'm referring to the Touchtweets example from the SDK for my code.

Thanks man.

[edspencer]

Ok, how does your server response indicate that there is no more data? If you open up src/plugin/ListPaging.js in the SDK (it's not scary...) you'll see the function that determines whether or not the Store is fully loaded, and therefore whether or not to show the noMoreRecordsText string:

/**
 * @private
 * Returns true if the Store is detected as being fully loaded, or the server did not return a total count, which
 * means we're in 'infinite' mode
 * @return {Boolean}
 */
storeFullyLoaded: function() {
    var store = this.getList().getStore(),
        total = store.getTotalCount();


    return total !== null ? store.getTotalCount() <= (store.currentPage * store.getPageSize()) : false;
}

You can see that it relies on the Store's totalCount being populated, which means your server response must somewhere return that number so that Store can figure out whether it's fully loaded or not. If you're not sure, you could put a debugger; statement inside that function and see what those values all come out as, but I'm guessing you're just missing the totalCount.

[stephensaw]

Thanks for the hints!

Checked the source and documentation, knows that I need to have the "total" (the default property) pass back from the server, what I need to do is get a count from database, and then query the database using limit and offset for paging, then I can pass back both data and total count of records available in database, so that paging knows when it will display the no more records text.

Thanks man, for all your time.

[edspencer]

Nice work - create something amazing with it then share it with the world, that would be more than thanks enough

[rbahumi]

Ok, how does your server response indicate that there is no more data? ...

You can see that it relies on the Store's totalCount being populated, which means your server response must somewhere return that number so that Store can figure out whether it's fully loaded or not. If you're not sure, you could put a debugger; statement inside that function and see what those values all come out as, but I'm guessing you're just missing the totalCount.

I did not manage to retrieve the number of records from the server. I am using a JSONP proxy, and my store's proxy reader uses the rootProperty: "data" config. Using rootProperty is more comfortable for me, because it creates a model instance for each dataitem, and I am doing a manipulation over these models from localstorage.
My first question is:
- is there a way to access the full returned 'json' string, while keeping the config rootProperty: "data"? This will allow to add a totalCount sibling to the 'json' object, and wont effect the model manipulation I'm already doing.

For now, I used something that is based over this solution, trying to set the totalCount from the store's 'beforeload' listener. Setting it using 'store.setTotalCount(somevalue)' works, but then, something sets its value back to 'null'. As a result, when the 'storeFullyLoaded' function is called, the total variable is equal to 'null'.

// This is the store's beforeload listener:
beforeload: function(store, operation, eOpts){
    var records = store.data.items;
    records.length = store.data.length;
    
    var pageSize = store.getPageSize();
    var pageIndex = store.currentPage;    // Page numbers start at 1
    var mod = records.length % pageSize;
    
    if (mod){
        //Set count to disable 'loading' message
        var totalRecords = records.length;
        store.setTotalCount(totalRecords);//The new value is set, but something sets it back to 'null' afterwards...
    }
}

Can you guess why that is the case?

[anavio]

As a result, when the 'storeFullyLoaded' function is called, the total variable is equal to 'null'.

Same problem here. I don't know what happen. I set totalCount, but when storeFullyLoaded is called totalCount is null