Catering to your Form Related Needs | Sencha Touch Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Sencha Touch Cookbook

By : Ajit Kumar

3.9 (8)

Sencha Touch Cookbook

3.9 (8)

By: Ajit Kumar

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

Sencha Touch Cookbook

Credits

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

Gear up for the Journey

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

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

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

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

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

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

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

Creating a pie chart

Rotating the pies

Grouping the pies

Highlighting a pie

Using a radar chart

Using a scatter chart

Taking your Application Offline

Taking your Application Offline

Introduction

Detecting offline mode

Storing your data offline

Storing your images offline

Application caching

Engaging Users by Responding to Events

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

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

Index

Working with dates using DatePicker

This recipe describes how to make use of the date picker form field provided by Sencha Touch, which allows the user to select a date.

Getting ready

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

Make sure that you have followed the Getting your form ready with FormPanel recipe in this chapter.

How to do it...

Carry out the following steps:

Copy ch02_01.js to ch02_04.js.

Open a new file named ch02_04.js and replace the definition of formBase with the following code:

var formBase = {
  items: [{
    xtype: 'datepickerfield',
    name: 'date',
    label: 'Date'
  }]
};

Include ch02_04.js in place of ch02_03.js in index.html.
Deploy and access the application in the browser.

How it works...

The date picker field can be constructed by using the Ext.form.DatePicker class instance or by using xtype: datepickerfield. The date picker form field implements HTML <select> . When the user tries to select an entry...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Sencha Touch Cookbook

Search

Your notes and bookmarks