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.
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
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:-
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( "Title" , "swiped");}, tap: function(){Ext.Msg.alert( "Title" , "Tapped");} } }); var viewport=new Ext.Panel({ fullscreen:true, layout:"fit", 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.