You are previewing Sencha Touch Cookbook - Second Edition.
O'Reilly logo
Sencha Touch Cookbook - Second Edition

Book Description

This cookbook-style tutorial will make it easy to create multi-platform applications for touch-based mobile devices. By learning Sencha Touch you’ll be skilling-up in one of the most popular HTML5 and JavaScript frameworks around.

  • Learn every aspect of creating, building, packaging, and running a Sencha Touch application

  • Integrate your applications with different data sources and present them differently using list, data view, charts, and so on

  • Package your application with or without Cordova/PhoneGap and run them on a desktop, emulator, and a real mobile device

  • In Detail

    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.

    Table of Contents

    1. Sencha Touch Cookbook - Second Edition
      1. Table of Contents
      2. Sencha Touch Cookbook - Second Edition
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Gear Up for the Journey
        1. Introduction
        2. Setting up the Android-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Setting up the iOS-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Setting up the BlackBerry-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Setting up a browser-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Detecting the device
          1. How to do it...
          2. How it works...
          3. See also
        7. Finding features that are supported in the current environment
          1. How to do it...
          2. How it works...
          3. See also
        8. Letting your application configure itself using profiles
          1. How to do it...
          2. How it works...
          3. See also
        9. Responding to orientation changes
          1. How to do it...
          2. How it works...
          3. See also
      9. 2. Catering to Your Form-related Needs
        1. Introduction
        2. Getting your form ready with form panels
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Standard submit
            2. Submitting on field action
            3. Post-submission handling
            4. Reading form data
            5. Loading data in the form fields
          5. See also
        3. Working with the search field
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a placeholder
          5. See also
        4. Applying custom validation in the e-mail field
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Working with dates using the date picker
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Setting the default date to the current date
            2. Setting the default date to a particular date
            3. Changing the slot order
            4. Setting the picker date range
          5. See also
        6. Making a field hidden
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing/hiding a field at runtime
          5. See also
        7. Working with the select field
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a custom display value
          5. See also
        8. Changing a value using slider
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Spinning the number wheel using spinner
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Recycling the values
          5. See also
        10. Toggling between your two choices
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Checkbox and checkbox groups
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        12. Text and text area
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Limiting the number of input characters
          5. See also
        13. Grouping fields with fieldset
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding instructions
          5. See also
        14. Validating your form
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      10. 3. Containers and Layouts
        1. Introduction
        2. Keeping your container lightweight
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using layout
          5. See also
        3. Working with Panel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Docking items
            2. Using layouts
            3. Panel used as an overlay
          5. See also
        4. Adding items to a container at runtime
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Inserting at a specific position
            2. Removing an item
            3. Hiding/showing
          5. See also
        5. Building wizards using CardLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the default active item
            2. Animating cards
          5. See also
        6. Docking items
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Fitting into the container using FitLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Arranging your items horizontally using HBoxLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Aligning the component vertically
            2. Aligning the component horizontally
          5. See also
        9. Arranging your items vertically using VBoxLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Aligning the component horizontally
            2. Aligning the component vertically
          5. See also
        10. Mixing layouts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Easing view navigation with the NavigationView class
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Doing some work when the Back button is tapped
            2. Randomly jumping to a particular view
            3. Showing different text for the Back button
            4. Showing the item title as Back button text
            5. Customizing the navigation bar
          5. See also
      11. 4. Building Custom Views
        1. Introduction
        2. Basic HTML templating using Template
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Compiling Template
            2. Formatting values
          5. See also
        3. Using XTemplate for advanced templating
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Compiling Template
            2. Formatting values
          5. See also
        4. Conditional view rendering using XTemplate
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Designing custom views using DataView
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Showing the filtered data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Responding to user actions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      12. 5. Dealing with Data and Data Sources
        1. Introduction
        2. Creating a model
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding methods to a model
            2. Extending a model
          5. See also
        3. Loading the form using a data model
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Saving form data using the associated model
          5. See also
        4. Working with a store
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding a record to the store at runtime
          5. See also
        5. Converting incoming JSON data into a model using JsonReader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Fetching records from a nested data
            2. Working with response metadata
          5. See also
        6. Converting incoming XML data into the model using XmlReader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Validations in models
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Inclusion
            2. Exclusion
            3. Format
            4. Changing the default message
          5. See also
        8. Defining your custom validation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Relating models using association
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Many-to-one association
            2. One-to-one association
          5. See also
        10. Persisting session-specific data using the SessionStorage proxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Working through the Store
          5. See also
        11. Persisting data using the LocalStorage proxy
          1. Getting ready
          2. How to do it...
          3. See also
        12. Accessing in-memory data using the Memory proxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        13. Loading data through AJAX using the Ajax proxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        14. Sorting data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sending the sorting information to the server
            2. Customizing the sort information being sent to the server
          5. See also
        15. Data grouping
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Filtering data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        17. Using a cross-domain URL in your application
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        18. Working with Web SQL databases
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      13. 6. Adding Components
        1. Introduction
        2. Working with the button component
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using badges
            2. Using icons
            3. Using pictos icons
            4. Using custom HTML as button content
          5. See also
        3. Creating a sheet of buttons with ActionSheet
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the position and animation
            2. ActionSheet as a cross-cut menu
            3. Using items other than buttons
          5. See also
        4. Carousel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing direction
            2. Turning off the indicator
          5. See also
        5. Managing a list of data using List
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sorting the entries
          5. See also
        6. Grouping items in a list
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Navigating through a list of data using IndexBar
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Working with a list of nested data using NestedList
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a property other than text
            2. Showing the Back button
            3. No toolbar, please!
            4. Using different text for the Back button
            5. Showing leaf node detail
            6. Using disclosure
          5. See also
        9. Picking up your choice using Picker
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the position and animation
            2. Aligning the slot text
            3. Using title
            4. Overriding the button text
            5. Hiding buttons
            6. Customizing the toolbar
            7. Showing multiple slots
          5. See also
        10. Switching between multiple views using SegmentedButton
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Keeping multiple buttons pressed
            2. Aligning buttons in the middle
          5. See also
        11. Working with Tab panels
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Positioning the tab bar at the bottom
          5. See also
        12. Getting quicker access to application features using Toolbar
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding non-button components
          5. See also
        13. Creating a new component
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        14. Extending an existing component's capability
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        15. Overriding a component's behavior
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Adding behavior to an existing component using plugins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 7. Adding Audio/Visual Appeal
        1. Introduction
        2. Animating an element
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Working with different animation durations
            2. Setting the direction of animation
            3. Reversing the animation
            4. Postponing animation
            5. Calling a function after the animation is over
          5. See also
        3. Ding-dong! You have got a message
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Hiding controls
            2. Looping
            3. Letting the user control the volume
          5. See also
        4. Working with videos
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Creating your drawing
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Working with an area chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing a legend
            2. Changing the legend text
          5. See also
        7. Working with a bar chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Limiting the bar width
            2. Using rounded corners
            3. Changing the spacing between the bars
          5. See also
        8. Working with a column chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Showing a group of bars and columns
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
            1. Changing the spacing between grouped bars
          5. See also
        10. Highlighting and displaying an item detail
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Customizing the Item Detail panel
          5. See also
        11. Working with a gauge chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing a needle
            2. The donut effect
          5. See also
        12. Working with a line chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Filling the area
            2. Smoothing curves
            3. Using cross-zoom to see more detail
          5. See also
        13. Working with a pie chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The donut effect
          5. See also
        14. Rotating the pies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        15. Highlighting a pie
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. See also
        16. Working with a 3D pie chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        17. Working with a radar chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a different marker
          5. See also
        18. Working with a scatter chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        19. Working with a candlestick/OHLC chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Using OHLC charts
            2. Changing the bar width
          5. See also
      15. 8. Taking Your Application Offline
        1. Introduction
        2. Detecting offline mode
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using aggressive timeout
            2. Using Sencha's Device API
          5. See also
        3. Storing your data offline in localstorage
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Storing your data offline using Sencha.io
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Storing your images offline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Application caching
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      16. 9. Increased Relevance Using Geolocation
        1. Introduction
        2. Finding out your location
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Finding out the location using native device APIs
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Watch for the location update
          5. See also
        4. Auto update of your location
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Tracking direction and speed
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Hooking up Google Maps with your application
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Using the current location as the map center
          5. See also
        7. Working with the Google Maps options
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Mapping Geolocation on Google Maps
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      17. 10. Device Integration
        1. Introduction
        2. Capturing and managing photos using a camera
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Pulling out those contacts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Working with orientation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Managing notifications
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Reading a file
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Handling the home button on Android, iOS, and BlackBerry
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Handling the back button on Android and BlackBerry
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Handling the menu button on Android and Blackberry
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        10. Handling the search button on Android
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Navigating using the BlackBerry trackpad
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      18. Index