Display a list in Sencha Touch with alphabet IndexBar docked on the right
In this example we are going to display a List of countries grouped by the first alphabet of country name along with an indexbar docked to the right for easy navigation within the list. 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' ] } });
Source for Country store - Countries.js
Ext.define('MyApp.store.Countries', { extend: 'Ext.data.Store', config: { model: 'MyApp.model.Country', autoLoad: true, sorters: ['name'], grouper: { groupFn: function(record) { return record.get('name')[0]; } }, 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', grouped: true, indexBar: 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'); }, });
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.