Sencha Touch Cookbook

Sencha Touch Cookbook

By : Ajit Kumar

Buy this Book

Sencha Touch Cookbook

By: Ajit Kumar

Buy this Book

Overview of this book

Sencha touch is a versatile HTML5-based framework for developing mobile web apps that look and feel native on touch screen devices, and with it you can write your code once and deploy it to both iOS and Android saving you both time and money. The Sencha touch cookbook has a comprehensive selection of recipes covering everything from installation right through to HTML5 geo location. The Sencha Touch Cookbook really is your one stop resource for cross platform HTML5 application development. It covers the basics such as setting up an iOS and Android development environment right through to much more complex development issues such as touch gestures, animation, rich media and geo location. Every recipe is practically focused. Maximum action. Minimum theory.

Sencha Touch Cookbook

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 the browser-based development environment

Setting up the production environment

Detecting the device

Finding information about features that are supported in the current environment

Initializing your application

Tweaking your application to configure itself using profiles

Responding to the orientation change

Catering to your Form Related Needs

Introduction

Getting your form ready with FormPanel

Working with search

Putting custom validation in the e-mail field

Working with dates using DatePicker

Making a field hidden

Working with the select field

Changing the value using Slider

Spinning the number wheel using Spinner

Toggling between your two choices

Checkbox and Checkbox group

Text and TextArea

Grouping fields with FieldSet

Validating your form

Containers and Layouts

Introduction

Keeping the container lightweight

Working with Panel

Adding items to a container at runtime

Building wizards using CardLayout

Panel docking using DockLayout

Fitting into the container using FitLayout

Arranging your items horizontally using HBoxLayout

Arranging your items vertically using VBoxLayout

Mixing layouts

Building Custom Views

Introduction

Basic HTML templating using Template

Using XTemplate for advanced templating

Conditional view rendering using XTemplate

Designing a custom view using DataView

Showing the filtered data

Responding to the user action

Dealing with Data and Data Sources

Introduction

Creating models

Loading the form using a data model

Working with Store

Converting incoming JSON data into models using JsonReader

Converting incoming XML data into models using XmlReader

Validations in models

Defining the custom validation

Relating models using association

Persisting session-specific data using SessionStorageProxy

Persisting data using LocalStorageProxy

Accessing in-memory data using MemoryProxy

Loading data through AJAX using AjaxProxy

Sorting of the data

Data grouping

Filtering data

Using a cross-domain URL in your application

Adding the Components

Introduction

Working with Button

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 your choice using Picker

Switching between multiple views using SegmentedButton

Working with Tab panels

Quicker access to application features using Toolbar

Creating a new component

Extending an existing component capability

Overriding a component behavior

Adding behavior to an existing component using plugins

Adding Audio/Visual Appeal

Introduction

Animate me!

Ding-dong! You have a message!

Working with videos

Adding the chart support to your app

Working with an area chart

Generating a bar chart

Creating a column chart

Showing a group of bars and columns

Switching between stacked and grouped orientation

Highlighting and displaying an item detail

Creating a gauge chart

Creating a line chart

Using a scatter chart

Taking your Application Offline

Introduction

Detecting offline mode

Storing your data offline

Storing your images offline

Application caching

Engaging Users by Responding to Events

Introduction

Handling Touch Events

Handling Scroll Events

Handling Tap Events

Handling Double Tap Events

Handling TapHold Events

Handling Swipe Events

Handling Pinch Events

Handling Drag Events

Increased Relevance Using Geolocation

Introduction

Finding out your location

Auto-update of your location

Tracking direction and speed

Hooking up Google Maps with your application

Working with Google Maps options

Mapping Geolocation on Google Maps

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Working with Tab panels

The Tab panel is a popular UI component which can hold other components and that can be accessed in a tabbed fashion using a tab bar. In this recipe, we will learn about the tab panel and the different options that we may use to build our application.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

How to do it...

Create and open a new file named ch06_10.js and paste the following code in it:

Ext.setup({
    onReady: function() {
    
  new Ext.TabPanel({
    fullscreen: true,
    ui        : 'light',
    sortable  : true,
    items: [
      {
        title: 'Album',
        html: 'Contains the photos!',
        cls: 'tab1'
      },
      {
        title: 'Help',
        html: '<h1 style="font-size:16px;"><b>Help</b></h1><p>This application shows the album of flower pictures. You can filter the flowers based on their category, e.g. Rose, and view the additional detail...

Sencha Touch Cookbook

By : Ajit Kumar

Sencha Touch Cookbook

By: Ajit Kumar

Overview of this book

Related Content you might be interested in

Current Title:

Sencha Touch Cookbook

Working with Tab panels

Getting ready

How to do it...