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"> .myButton { margin-left: 10px; margin-right: 10px; float: left; } .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, 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', itemTpl: '<div class="myButton">' + '<input type="button" name="{code}" value="Click" ' + 'style="padding:3px;">' + '</div>' + '<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', itemtap: 'onItemTap', } } }, onActivate: function() { console.log('Main container is active'); }, onItemTap: function(view, index, target, record, event) { console.log('Item was tapped on the Data View'); console.log(view, index, target, record, event); if(event.target.type == "button"){ Ext.Msg.alert('You clicked on the Button ...', 'The country code selected is: ' + event.target.name); } else { Ext.Msg.alert('You clicked on the Row ...', 'The country code selected is: ' + record.get('code')); } }, });
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.