Programmers Sample Guide: Sencha Touch 2 List with Load More option

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

Source for the application HTML file - index.html

<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch 2 List example - Load data from Remote
 Server</title>
<link rel="stylesheet"
 href="sencha-touch/resources/css-debug/sencha-touch.css"
 type="text/css">
<script type="text/javascript"
 src="sencha-touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

Source for the JavaScript file - app.js

Ext.Loader.setConfig({ 
 enabled: true 
});

Ext.application({
    
 name: 'MyApp',
 appFolder: 'app',
 
 requires: [
               'MyApp.view.MainPanel',
               ], 
               
    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: 'Ext.data.Model',
    config: {
     fields: [
              'code',
              'name',
              'continent',
              'region',
              'lifeExpectancy',
              'gnp'
              ]
    }
});

Source for Country store - Countries.js

Ext.define('MyApp.store.Countries', {
    extend: 'Ext.data.Store',
    
    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>' +
        '</div>'
    
    } 
});

Source for the application controller - DataViewDemo.js

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

 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');
 },

});

Programmers Sample Guide

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