Blog Archive

Sencha Touch 2 List with Load More option - Ext.plugin.ListPaging

In this example we are going to display a List of countries but only load 25 records at a time. When the user scrolls to the bottom of the list it will load more countries until there is no more left. This is possible with the help of plugin named ListPaging. For back-end programing for this example please refer to the link below...
Sencha Touch 2 List examples using Java Servlet and MySQL database

sencha touch list load more
sencha touch list load more

Source for the application HTML file - index.html

<!DOCTYPE html>
<title>Sencha Touch 2 List example - Load data from Remote
<link rel="stylesheet"
<script type="text/javascript"
<script type="text/javascript" src="app.js"></script>

Source for the JavaScript file - app.js

 enabled: true 

 name: 'MyApp',
 appFolder: 'app',
 requires: [
    views : ['MainPanel'],           
    controllers: ['DataViewDemo'],
    launch: function() {
     console.log('Application launch');
     Ext.create('Ext.Container', {
      fullscreen: true,
      layout: 'vbox',
         items: [{
          flex: 1,
          xtype: 'mainPanel'

Source for Country model - Country.js

Ext.define('MyApp.model.Country', {
    extend: '',
    config: {
     fields: [

Source for Country store - Countries.js

Ext.define('', {
    extend: '',
    config: {
     model: 'MyApp.model.Country',
     autoLoad: true,
     proxy: {
         type: 'ajax',
         url: 'CountryServlet',
         reader: {
             type: 'json',
             totalProperty: 'totalCount',
             rootProperty: 'countries',
             successProperty: 'success'

Source for DataView List - MainPanel.js

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.dataview.List',
    alias : 'widget.mainPanel',
    config: {
     store : 'Countries',
     plugins: [{
              xclass: 'Ext.plugin.ListPaging',
              autoPaging: true
     itemTpl: '<div class="myContent">'+ 
        '<div>Country is <b>{name}</b></div>' +
        '<div>Continent: <b>{continent}</b> Region: <b>{region}</b></div>' +

Source for the application controller - DataViewDemo.js

Ext.define('MyApp.controller.DataViewDemo', {
 extend : '',

 config: {
  profile: Ext.os.deviceType.toLowerCase(),
  stores : ['Countries'],
  models : ['Country'],
  refs: {
   myContainer: 'mainPanel'
  control: {
   'mainPanel': {
    activate: 'onActivate',


 onActivate: function() {
  console.log('Main container is active');



  1. Nice. It is also useful to set "pageSize" on your store, this will handle limit values for you in case you don't want to use the default 25.

  2. This was a really good start for the ListPage plugin.
    There is more documentation on it here.!/api/Ext.plugin.ListPaging

  3. nice and it is helpful. Those who want to implement list paging functionality via mvc web api and sencha touch:

  4. Good. It's also helpful to arranged "pageSize" in your shop, this can manage restrict ideals for you personally in the event you do not wish to make use of the default twenty five.

    LOL elo boosting

    Fifa 14 Ultimate Team Coins

  5. its not working with xtype 'dataview'.