Sencha Touch Cookbook, Second Edition

Sencha Touch Cookbook, Second Edition

By : Ajit Kumar

Buy this Book

Sencha Touch Cookbook, Second Edition

By: Ajit Kumar

Buy this Book

Overview of this book

Sencha Touch is one of the most popular HTML5 and JavaScript frameworks for building touch-based mobile devices. Using Sencha Touch, you can create applications for touch mobile devices with ease, and once created, the same application works on multiple platforms – iOS, Android, Blackberry – without having to change anything. Sencha Touch Cookbook, Second Edition is a practical, hands-on guide with easy to follow recipes that provide you with clear, step-by-step instructions, which will help you take complete advantage of the power of Sencha Touch 2 and will help you to build amazing applications for the mobile world. Sencha Touch Cookbook, Second Edition starts by showing you how to set up your project for development, then walks through building, packaging, and running it in a browser, emulator, or a real device. With the groundwork set, the subsequent recipes of the book take you through the different UI components offered by the framework and explains how to use them, when to use them, and, if needed, how to extend them for your own application need. You will also learn how to model your client side data, load data from different data sources, and use them on the data-centric UI components. The later parts of the book cover the practical day-to-day problems like how to create a custom view, how to take your application offline and support automatic sync, how to utilize the Geolocation to learn more about the user, how to utilize device features such as camera, contact, orientation, and how to link your application behaviour with the device buttons such as Back, Search, and so on. At the end, the book shows you how to create native packages without using PhoneGap/Cordova using Sencha Cmd. Using this book, you will learn everything about using Sencha Touch classes and components to build mobile applications that can run across multiple platforms.

Sencha Touch Cookbook Second Edition

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Gear Up for the Journey

Introduction

Setting up the Android-based development environment

Setting up the iOS-based development environment

Setting up the BlackBerry-based development environment

Setting up a browser-based development environment

Detecting the device

Finding features that are supported in the current environment

Letting your application configure itself using profiles

Responding to orientation changes

Catering to Your Form-related Needs

Introduction

Getting your form ready with form panels

Working with the search field

Applying custom validation in the e-mail field

Working with dates using the date picker

Making a field hidden

Working with the select field

Changing a value using slider

Spinning the number wheel using spinner

Toggling between your two choices

Checkbox and checkbox groups

Text and text area

Grouping fields with fieldset

Validating your form

Containers and Layouts

Introduction

Keeping your container lightweight

Working with Panel

Adding items to a container at runtime

Building wizards using CardLayout

Docking items

Fitting into the container using FitLayout

Arranging your items horizontally using HBoxLayout

Arranging your items vertically using VBoxLayout

Mixing layouts

Easing view navigation with the NavigationView class

Building Custom Views

Introduction

Basic HTML templating using Template

Using XTemplate for advanced templating

Conditional view rendering using XTemplate

Designing custom views using DataView

Showing the filtered data

Responding to user actions

Dealing with Data and Data Sources

Introduction

Creating a model

Loading the form using a data model

Working with a store

Converting incoming JSON data into a model using JsonReader

Converting incoming XML data into the model using XmlReader

Validations in models

Defining your custom validation

Relating models using association

Persisting session-specific data using the SessionStorage proxy

Persisting data using the LocalStorage proxy

Accessing in-memory data using the Memory proxy

Loading data through AJAX using the Ajax proxy

Sorting data

Data grouping

Filtering data

Using a cross-domain URL in your application

Working with Web SQL databases

Adding Components

Introduction

Working with the button component

Creating a sheet of buttons with ActionSheet

Carousel

Managing a list of data using List

Grouping items in a list

Navigating through a list of data using IndexBar

Working with a list of nested data using NestedList

Picking up your choice using Picker

Switching between multiple views using SegmentedButton

Working with Tab panels

Getting quicker access to application features using Toolbar

Creating a new component

Extending an existing component's capability

Overriding a component's behavior

Adding behavior to an existing component using plugins

Adding Audio/Visual Appeal

Introduction

Animating an element

Ding-dong! You have got a message

Working with videos

Creating your drawing

Working with an area chart

Working with a bar chart

Working with a column chart

Showing a group of bars and columns

Highlighting and displaying an item detail

Working with a gauge chart

Working with a line chart

Working with a pie chart

Rotating the pies

Highlighting a pie

Working with a 3D pie chart

Working with a radar chart

Working with a scatter chart

Working with a candlestick/OHLC chart

Taking Your Application Offline

Introduction

Detecting offline mode

Storing your data offline in localstorage

Storing your data offline using Sencha.io

Storing your images offline

Application caching

Increased Relevance Using Geolocation

Introduction

Finding out your location

Finding out the location using native device APIs

Auto update of your location

Tracking direction and speed

Hooking up Google Maps with your application

Working with the Google Maps options

Mapping Geolocation on Google Maps

Device Integration

Introduction

Capturing and managing photos using a camera

Pulling out those contacts

Working with orientation

Managing notifications

Reading a file

Handling the home button on Android, iOS, and BlackBerry

Handling the back button on Android and BlackBerry

Handling the menu button on Android and Blackberry

Handling the search button on Android

Navigating using the BlackBerry trackpad

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Arranging your items horizontally using HBoxLayout

The HBoxLayout class arranges items horizontally across a container. It optionally divides the available horizontal space between child items containing a flex configuration, which is a numeric. The flex option is a ratio that distributes the width after any items with explicit widths have been accounted for. We can either use the width property to specify a fixed width or use flex. This recipe describes how we can arrange our items using HBoxLayout.

Getting ready

Make sure you have set up your development environment by following the recipes outlined in Chapter 1, Gear Up for the Journey.

Make sure you have created the ch03 folder inside the www folder.

How to do it...

Carry out the following steps for arranging your items horizontally using HBoxLayout:

Create and open a new file named ch03_07.js and copy-paste the following code into it:

Ext.application({
  name : 'MyApp',
  launch : function() {
    var pnl = Ext.create('Ext.Panel', {
     ...

Sencha Touch Cookbook, Second Edition

By : Ajit Kumar

Sencha Touch Cookbook, Second Edition

By: Ajit Kumar

Overview of this book

Related Content you might be interested in

Current Title:

Sencha Touch Cookbook, Second Edition

Arranging your items horizontally using HBoxLayout

Getting ready

How to do it...