Programmers Sample Guide: Sencha Touch 2 List disclosure icon example

In this example we are going to display a List of countries along with the disclosure icon. When the user taps on the disclosure icon it triggers the disclose event that we can interrogate to get information about the record selected and then provide relevant information on a new screen. You can condition the disclosure icon by using the disclosureProperty which by default is set to "disclosure". If you set this property to false it will hide the icon. Here for the sake of demo we have set the disclosure to false for every alternate row. 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">
<style type="text/css">
.myContent {
 margin-bottom: 5px;
}
</style>
<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',
              'disclosure'
              ]
    }
});

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',
     onItemDisclosure : 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',
    disclose: 'onDisclose' 
   }
  }  

 },

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

 onDisclose: function(view, record, target, index, event) {
  console.log('Disclosure icon was tapped on the List');
  console.log(view, record, target, index, event);
  Ext.Msg.alert('Clicked on the disclosure icon', 
    'The country code selected is: ' + record.get('code'));
 }

});

Programmers Sample Guide

Sencha Touch 2 List disclosure icon example