Sencha Touch 2 Quick Start

Contents of document: Ø The Class System Sencha Touch 2 Ø The Component System Quick Start Ø The Event System Ø Selectors Ø Data Package Ø And more… The Class System hondaMotercycle.isExpensive(); //returns false hondaMotercycle.getPrice(); //returns 2000 The Sencha Touch class system allows creation of new JavaScript classes, providing inheritance, dependency loading, var suzukiGSXR = Ext.create('SuperBike', { mixins, configuration options, and more. buildYear: 2015, topSpeed: 300, price: 12000, Ext.define('Motercycle', { model: 'gsxr1000', config: { brand: 'Suzuki' buildYear: null, }); topSpeed: null, suzukiGSXR.isExpensive(); //returns true price: null suzukiGSXR.getModel(); //returns "gsxr1000" }, constructor: function (config) { this.initConfig(config); You may notice the use of some functions that we have not }, explicitly defined, for example getModel(). The Sencha Touch isExpensive: function () { class system does us a favor and generates 4 types of return this.getPrice() > 2000; convenience functions: } • Getter – return current value; getName() }); • Setter – set new value; setName() Ext.define('SuperBike', { • Applier – called by setter, execute logic when extend: 'Motercycle', property changes; applyName() config: { • Updater – called by setter, execute logic when the model: null, value for a property changes; updateName() brand: null }, Please note that the applier and updater isSuzuki: function () { functions require implementation. The return this.getBrand() === 'Suzuki'; applier function requires a return of the value }, that will be set to the property. The updater isExpensive: function () { TIP gets fired after the applier and does not return this.getPrice() > 10000; handle a return, rather, it just informs of a } value change }); Let’s assume we want to round the price of the Motercycle to We defined a Motorcycle class with a Superbike subclass. The the nearest 1000. To do so we would implement the Motorcycle class has some basic properties defined in the applyPrice function in the Motercycle class: config object. Besides class properties we defined some basic class methods as well. The Superbike class extends the Motorcycle class and thereby inherits its properties and applyPrice : function (newPrice, oldPrice) { methods. In addition we are able to define a unique return Math.round(newPrice / 1000) * 1000; implementation of each method. } We can instantiate a class by using Ext.create instead of the new keyword. Using the former leverages Sencha Touch’s Usage: dynamic dependency loader and allows for using aliases, as well as easily applying the config object. hondaMotercycle.setPrice(1995); hondaMotercycle.getPrice(); //returns 2000 var hondaMotercycle = Ext.create('Motercycle', { buildYear: 2002, topSpeed: 180, price: 2000 }); Based on: ‘Sencha Touch - Open-Source HTML5 Mobile Web Development Made Easy’ by Stan Bershadskiy Sencha Touch provides the JsonReader, JsonWriter, Data Package XmlReader and XmlWriter classes. These reader and writer types are specified on the proxy definition. A crucial requirement for many mobile applications is to Example Store with Proxy consume data from external sources as well as maintain internal application specific data. for these situations Sencha Touch provides the Data Package, a set of classes responsible Ext.define('MyApp.store.Cars', { for loading, storing, manipulating and saving data. extend: 'Ext.data.Store', requires : [ Three types of classes generally leverage the data package: 'Ext.data.reader.Json', • Model – an entity that represents a single record, 'Ext.data.writer.Json' defining its fields, validation, associations and ], conversion parameters. config: { • Store – collection of model instances with support for model: 'MyApp.model.Car', sorting, filtering, and grouping proxy: { • Proxy – medium that interacts with the remote or type: 'ajax', local data source and performs the necessary reading url: '/cars', and writing operations. reader: { type : 'json', Models rootProperty: 'cars' Models are data objects that are managed in your application. } Models are defined by a set of data fields. Each field is defined } by its name, type, and optional defaultValue. } }); Supported field types are: • string Proxies can be attached to both Models and • int Stores. The result is the same, the Store will • float be looking for a Proxy config on itself and if • boolean none is present it will look for it on the • date Model. however, if the Proxy is defined inside the Model, multiple Stores using the A convert function can also be implemented on the field to TIP same Model don’t have to define the config. perform processing on the field’s data. Furthermore, defining a Proxy inside a Model allows you to save and load an Here is a sample model: instance of that Model without needing a Store Ext.define('MyApp.model.Car', { extend: 'Ext.data.Model', To access a store from anywhere in the application you can config : { use the Ext. getStore() function and pass in either a defined fields : [ storeId or the store’s classname, excluding namespace. { name: 'make', type: 'string' }, { name: 'model', type: 'string' }, Example of loading data into a store: { name: 'topSpeed', type: 'int' }, { name: 'price', type: 'float' }, { name: 'options', type: 'auto' } Ext.getStore("Cars").load(); ] } }); Data Proxies There are four proxies provided by Sencha Touch that can be used in a Store or Model. • LocalStorage – saves data to localStorage • Memory – saves data in memory, extremely volatile • Ajax – communicates with a RESTful resource on the same domain • JsonP – communicates with a service on an external domain using JSON-P Each proxy type implements four basic operations create, read, update, and destroy. When interacting with Server Proxies, there is a need for serializing the data sent and retrieved from the server. for this Based on: ‘Sencha Touch - Open-Source HTML5 Mobile Web Development Made Easy’ by Stan Bershadskiy The Component System Common Components Useful Properties Component Purpose & Functions The Sencha Touch Component system is the foundation of all the visual elements in the framework. The Component system Component Basic Visual Class xtype Ext.Component cls makes full use of the Class system’s dependency injection and xtype: component html hierarchical support. Every Sencha Touch view class is a tpl subclass of Ext.Component, and thus follows its lifecycle. data show() / hide() Components are generally defined by an xtype. An xtype is a /destroy() shortcut for the full component Class name allowing for lazy instantiation. Using xtypes to instantiate components allows Container Manages Component layout Ext.Container rendering and items the creation of the object to be deferred to when it’s actually xtype: container arrangement scrollable needed, thus saving resources. add(component) / remove(component) There may be times when you want to display multiple components, either all at once or individually. The Panel Ext.Panel Container designed showBy(component) xtype: panel to float as overlays Ext.Container class exists for these situations. Containers provide functionality for adding child Components, removing Toolbar Ext.Toolbar Docked containers title Components and specifying a Layout that determines how xtype: panel that generally hold left / right these components are displayed. Buttons and a Title ui Button Ext.Button Basic tappable text xtype: button component ui iconCls iconAlign Based on: ‘Sencha Touch - Open-Source HTML5 Mobile Web Development Made Easy’ by Stan Bershadskiy Tab Panel Container that allows tabBarPosition Ext.create('Ext.Container', { Ext.tab.Panel user to easily switch fullscreen: true, xtype: tabpanel between components using a Toolbar layout: 'hbox', items: [ MessageBox Modal Container for Ext.Msg.alert(title, { Ext.Msg displaying alerts and msg, callback) xtype: 'panel', Ext.MessageBox notifications. Ext.Msg Ext.Msg.confirm(titl html: 'message list', is a singleton that e, msg, callback) flex: 1 allows for creation of Ext.Msg.prompt(titl }, predefined e, msg, callback) { MessageBox xtype: 'panel', instances. html: 'message preview', flex: 2 Carousel Container that allows ui Ext.Carousel user to switch active direction } xtype: carousel components by indicator ] swiping next() / previous() }); List Container of store Vbox layout Ext.dataview.List dynamically rendered itemTpl xtype: list components from a itemCls Data Store onItemDisclosure grouped indexBar Form Panel Panel that contains a getValues() / Ext.form.Panel set of form fields to be setValues(data) xtype: displayed submit(options, formpanel params, headers) Form Fields Base class for all data name Ext.field.field input form fields label / labelCls / xtype: field labelAlign inputCls required Card layout Sometimes you want to show several information screens Layouts information on a small device screen. TabPanels and Carousels both enable you to see one screen of many at a Layouts describe the sizing and positioning time, and underneath they both use a Card Layout. on Components inside your app. for example, an email client might have a list of messages pinned to the left, taking up one Card Layout takes the size of the Container it is applied to third of the available width, and a message viewing panel in the and sizes the currently active item so as to completely fill the rest of the screen. Container. It then hides the rest of the items, allowing you to change which one is currently visible, but only showing one We can achieve this using an hbox layout and its ability at

Load more