1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    stephensaw is on a distinguished road

      0  

    Default Answered: Paging Plugin Determine No More Data

    Answered: Paging Plugin Determine No More Data


    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:
    PHP Code:
    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"            
                
    }        
         },        
             
    autoLoadfalse    
         
    }
    }); 
    The view:
    PHP Code:
    Ext.define("TestSencha.view.ProductList",{    
        
    extend"Ext.dataview.List",    xtype"productlist",
        
    requires: ["Ext.plugin.ListPaging"],
        
    config: {        
        
    store"Product",         
        
    plugins: [{                
            
    xclass"Ext.plugin.ListPaging",                
            
    autoPagingfalse            
        
    }],
            
    itemTpl: [ "{name}" ]
        }
    }); 
    Sample of result with data:
    Code:
    <script>Ext.data.JsonP.callback1({"products":[{"id":"1","name":"Product A"}]});</script>
    Sample of result without data:
    Code:
    Ext.data.JsonP.callback1({"products":[]});
    Part of my PHP code that returning result:
    PHP Code:
    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.

  2. 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:

    Code:
    /**
     * @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.

  3. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    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:

    Code:
    listPagingPlugin.getLoadMoreCmp().hide();
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    stephensaw is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    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
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  6. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    stephensaw is on a distinguished road

      0  

    Default


    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.

  7. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    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:

    Code:
    /**
     * @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.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    stephensaw is on a distinguished road

      0  

    Default


    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.

  9. #8
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Nice work - create something amazing with it then share it with the world, that would be more than thanks enough
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  10. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Quote Originally Posted by edspencer View Post
    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'.
    Code:
    // 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?

  11. #10
    Sencha User
    Join Date
    Dec 2012
    Posts
    12
    Vote Rating
    0
    anavio is on a distinguished road

      0  

    Default


    Quote Originally Posted by rbahumi View Post
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar