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 Page Size Plugin

Hello,

Here is another ExtJs blog. Recently I got a requirement for page size plugin in ExtJs grid. User can control number of records in the grid. It should be displayed in grid bottom toolbar. See the image below.

So we created a plugin for it by extending Ext Combo Box. See the code below.

Ext.ux.PageSizePlugin = function() {

Ext.ux.PageSizePlugin.superclass.constructor.call(this, {

          store: new Ext.data.SimpleStore({

                 fields: ['text', 'value'],

                 data: [['50', 50], ['100', 100],['150', 150]]

          }),

                  mode: 'local',

          displayField: 'text',

          valueField: 'value',

          editable: false,

          allowBlank: false,

          triggerAction: 'all',

          width: 50

    });

};

After this extend Ext combo and add the required listeners.

Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {

init: function(paging) {

      paging.on('render', this.onInitView, this);

},

onInitView: function(paging) {

       paging.add('-',

      this,

      'Items per page'

);

this.setValue(paging.pageSize);

        this.on('select', this.onPageSizeChanged, paging);

},

onPageSizeChanged: function(combo) {

       this.pageSize = parseInt(combo.getValue());

       this.doLoad(0);

}

});

So our plugin is ready. Now add it to paging toolbar.

var pager = new Ext.PagingToolbar({

pageSize: 50,

store: store,

displayInfo: true,

displayMsg: 'Displaying topics {0} - {1} of {2}',

emptyMsg: "No topics to display",

plugins: [new Ext.ux.PageSizePlugin()],

listeners: {

beforechange : function (pager, params )  {

}

}

});

Add this toolbar in bottom tool bar of the ExtJs grid.

After this we can use page size while reloading grid data store.

store.load({params:{limit: pager.pageSize}});

Use this limit parameter in your database query.