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

});

5 comments :

  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.

    ReplyDelete
  2. This was a really good start for the ListPage plugin.
    There is more documentation on it here.
    http://docs.sencha.com/touch/2.2.1/#!/api/Ext.plugin.ListPaging

    ReplyDelete
  3. nice and it is helpful. Those who want to implement list paging functionality via asp.net mvc web api and sencha touch:
    http://rohit-developer.blogspot.in/2014/02/list-paging-in-sencha-touch.html

    ReplyDelete
  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

    ReplyDelete
  5. its not working with xtype 'dataview'.

    ReplyDelete