Sencha Touch List Paging with Memory Store

Hello,

Recently I was working with Sencha Touch, Phonegap application. Where we have sqlite database as a local storage and we have number of lists where we displayed records from different tables. In some tables we were having more than 300 records and for the better performance and user experience we want to have paging in list.

Sencha list does support paging with list paging plugin. It's like you have to configure your list store with page size. So when you reach at end of the list store will be loaded again and it will again call url mentioned in your proxy and pass page number as param. But here in our case we have local database. So we were not having any ajax proxy where we can send page params and get next page data. Instead we have to write a db logic to get certain range of records. How to do that. First we extended list and added currentPage as config in it and it's initialized with 1.

Now the problem is we have to detect that user has scrolled till the end of the list so we can load next page data in list along with other data. This is the same logic used by list paging plugin. Check the following code.

'#listItemId':{

         initialize: function(list){

                var scroller = list.getScrollable().getScroller();

                scroller.on({

                        scrollend: function(scroller, x, y){

                                if (y >= scroller.maxPosition.y) {

                                       //scrolled till end.

                                       //logic to get next records from database.

                                }

                        },

                       scope: this

               });

        }

}

Above code you need to add in your contoller's this.control method. The logic is quite simple. We added scroll end listener for list scrollbar and checked it's postion. If scroller's y coordinate matches scrollbar's max postion, that means we are at end. So here we have to write our logic to get next set of data from database. 

Hope this helps you. 

ExtJs Grid Paging - Go To Last Page After Inserting New Record

Hello,

Recently I was working on a ExtJs editor grid where user can enter new row by pressing button in the top toolbar. A row is inserted at bottom of grid and user can insert data in row. When user tab out or click on Save, the data goes to database and grid store reloaded. See the image below.

Now here is the issue. Consider grid page size as 25 and number of records are 35 and you are on page 1. That means you are viewing record 1 to 25. Now when you insert the row and when grid is refreshed, newly inserted record is in page 2 and you are still on page 1 so sometimes user feels that data is not inserted. So how to overcome this. I will describe solution that I have used. There may be other better solution. If you have any suggestion please add a comment.

First you need to add afteredit event in you grid. See the code below.


listeners:{
            afteredit:function(e){                       
                         Ext.Ajax.request({
                                    url : 'http://www.example.com/insertData.php',
                                    method:'GET',
                                    params:{                                 
                                        id : e.record.id,
                                        value : e.value
                                    },
                                    success:function(resp,opt){                                     
                                    },
                                    failure:function(resp,opt){
                                       
                                    }
                                });
             }
}


When you tab out of editor or Click on Save this event will be fired and it will send data to database using ajax request. Now we all know that for paging in MySql we have to use start and limit. For example.

select * from myTable limit 0,25

Above query will give first 25 records. to fetch next page use following query

select * from myTable limit 25,25

here first 25 indicates first row number of second page. So my trick was to return first row index of last page of table in which new record is inserted. Check the following code.


$start = 25;
$result = $start;


$output[ 'success' ] = true;
$output[ 'result' ] = $result; 
echo json_encode($output);

Above code will return JSON data back to browser. Now use that to reload the store. Following code will come in Success methods of Ajax Request mentioned in above code.


var returnValue= eval('(' + resp.responseText + ')');                                  
var start = returnValue.result;
if(start){
              myGrid.store.baseParams.start = start;                                      
}
myGrid.getView().refresh();
myGrid.store.reload();

ExtJs grid store uses start and limit parameter along with paging toolbar. So trick was to set start in base parameters of grid store and reload the grid. This will lead you to the last page in grid after inserting new record so user can see newly added record.