Sencha Touch is a JavaScript framework for developing mobile web applications. It allows developers to use HTML5, CSS, and JavaScript to build apps that look and feel like native mobile apps. Sencha Touch abstracts away platform differences and provides common mobile UI components like panels, toolbars, lists, and forms. It also includes features like templating, data stores, and layouts to help structure and style mobile apps.

1. Sencha Touch HTML5 and JavaScript Mobile Web App Framework Version 1.01

13. The framework’s provide many ready to use themes that make the Web App look native

14. Sencha Touch Components

16. Panels can contain an array of Items and docked Items:- Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { new Ext.Panel ({ fullscreen : true , items : [ ] , dockedItems : [ ] }); } });

17. In the figure we have a Panel with three docked items:- ToolBar docked at the Top List Panel docked at the Left ToolBar docked at the bottom Docked Items Example

19. Styling With UI Attribute

20. Sencha Touch Buttons and icons and docked Toolbars

33. Data Stores Ext.regModel('Task', { fields: [ {name: 'name', type: 'string'}, {name: 'description', type: 'string'} ] }) var dataStore = new Ext.data.Store({ model: 'Task', data: tasks }) var listControl = new Ext.List({ store: dataStore}) For data-driven controls - such as Lists and Trees, Sencha Touch requires that you use their data model abstraction. To convert an array of objects(with the prescribed fields) into an Ext data store, we would have to:- To bind dataStore to a List control, we would have to:-

34. ListPanel in Sencha Touch Ext.regModel('Contact',{ fields:['firstn','lastn'] }); var storex=new Ext.data.Store({ model:'Contact' , data:[ {firstn:"Askhay",lastn:"Prabhu"}, {firstn:"Ammeet",lastn:"Iyer"}, {firstn:"Prateek",lastn:"Koul"} ] )}; listPanel = new Ext.List({ id: 'disclosurelist', store: storex, grouped:'true', }); wrapperpanel=new Ext.Panel({ id:'wrapperpan', items:listPanel, }); Step 1 Step 2 Step 3

35. Other useful Sencha Components var datePicker = new Ext.DatePicker({ useTitles: true, }); var panel = new Ext.Panel({ fullscreen: true, layout: { type: 'vbox', align: 'center', pack: 'center' }, items: [{ xtype: 'button', ui: 'normal', text: 'Show DatePicker', handler: function() { datePicker.show(); } }] }); Date Picker

36. xtype:'button', text:'Test', handler:function(){ Ext.Msg.alert( ‘ Title ‘ , ’Hello’); } xtype:'button', text:'Test', handler:function(){ Ext.Msg.confirm(' Confirmation','Are You Sure You Want To Quit?',Ext.emptyFn); } xtype:'button', text:'Test', handler:function(){ Ext.Msg.prompt('Welcome','Enter First Name', Ext.emptyFn); } Sencha Touch Pop-Ups xtype:'button', text:'Test', handler:function(){ Ext.Msg.alert( ‘ Title ‘ , ’Hello’); } Alert Box Prompt Box Confirm Box

40. Touch Grid Panel(Continued) var colModel = [{ header: &quot;<span style='font-size:13px'>AppName</span>&quot;, mapping: &quot;AppName&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Description</span>&quot;, mapping: &quot;Description&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Type</span>&quot;, mapping: &quot;Type&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Download</span>&quot;, mapping: &quot;Download&quot;, cls: &quot;centered-cell&quot;, } ]; new Ext.ux.TouchGridPanel({ store: store, colModel: colModel, });

42. The Framework recognizes various tap events, hence allowing for mapping functions to each event. Sencha Touch Events

43. Event Listeners var EventPanel=new Ext.Panel({ }); EventPanel.addListener({ body:{ swipe: function(){Ext.Msg.alert( &quot;Title&quot; , &quot;swiped&quot;);}, tap: function(){Ext.Msg.alert( &quot;Title&quot; , &quot;Tapped&quot;);} } }); var viewport=new Ext.Panel({ fullscreen:true, layout:&quot;fit&quot;, items:[EventPanel] }); In the example, touch events are added to the body or element section if the panel. The EventPanel is then added to another container panel, which would then render it.

44. Difference between Panel and Panel Body or Element

50. Thank You