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