Page of 168
Teach Yourself Sencha Complete in a Day
About Fig Leaf Software
About the Authors
Course Objectives and Prerequisites
Reviewing the Course Format
Outlining the Course
Reviewing the Mobile App
Reviewing the Desktop App
Installing the Courseware
Unit Summary
Unit 2: Teach Yourself Sencha Touch
Understanding Design Challenges with Devices
Designing for Phones
Developing for Tablets
Exercise 2-1: Introducing Sencha Touch
Acquiring the Tools of the Trade
Introducing Sencha Cmd 3
Introducing Sencha Architect
Using Chrome as a Device Emulator
Emulating the Mobile Experience in Chrome
Debugging in Chrome
Programatically Setting Breakpoints
Testing with Simulators and Emulators
Using Ripple
Using the iOS Simulator
Exercise 2-2: Getting Started with Sencha Touch
Getting Started with Sencha MVC
Understanding the MVC file structure
Understanding the Class System
Defining your Application in App.js
Understanding the Role of Ext.Viewport
Managing Projects with Sencha Architect
Exercise 2-3: Using Sencha Architect to Initialize Your App
Defining Views
Using Components
Nesting Components in Containers
Using the hbox and vbox Layout Managers
Using the fit and card Layout Managers
Docking Toolbars, Titlebars, and Buttons
Implementing a Tab Panel
Exercise 2-4: Defining Views
Using Controllers to Handle User Interactions
Using Ext.ComponentQuery to Select Components
Defining Controller Refs and Event Handlers
Exercise 2-5: Handling Interactions with Controllers
Working with Data
Defining a Proxy
Defining a Data Store
Using List Views to Visualize Data
Handling Ext.dataview.List Events
Exercise 2-6a: Reading Data from a Server
Exercise 2-6b: Displaying Data in a List
Developing Forms
Configuring Data Entry Fields
Configuring Text Fields
Configuring Email, Number, and URL Fields
Configuring Select Fields
Loading, Validating, and Saving Form Data
Exercise 2-7a: Creating a Form
Exercise 2-7b: Navigating Between Views
Exercise 2-7c: Validating and Saving Form Data
Exercise 2-7d: Updating and Deleting Data
Lesson 2-8: Implementing Master-Detail Interfaces
Exercise 2-8: Working with Ext.Navigation.View
Implementing Geo Features
Licensing Google Maps
Loading the Google Maps API
Geocoding Addresses
Getting the Current Location
Calculating the Distance Between Two Points
Instantiating a Map View
Adding Map Markers
Making Map Markers Tappable
Exercise 2-9a: Geocoding Addresses
Exercise 2-9b: Calculating Distance to Targets
Exercise 2-9c: Visualizing Data on Maps
Exercise 2-9d: Completing the Friends Detail View
Exercise 2-9e: Building the Friend Randomizer
Adding Multimedia
Working with Images
Working with Audio
Supporting HTML5 Video with Ext.Video
Displaying YouTube Videos
Displaying YouTube Videos with the YouTube iFrame API
Exercise 2-10: Playing HTML5 Video
Introducing Sass and Compass
Understanding Sass Fundamentals
Theming Sencha Touch Apps with Sass
Modifying the Sencha Touch Default Theme
Using Web Fonts and Typography
Adding Transparency Effects
Theming Buttons and Toolbars
Theming Containers and Lists
Using Compass Mixins to Reduce HTTP Requests
Exercise 2-11: Theming your App
Going Into Production
Using Sencha Cmd 3 to Create a Production Web Build
Configuring Architect to Produce Native Apps
Configuring Native Packager Settings
Unit 3: Teach Yourself Ext JS 4
Introducing Ext JS
Reviewing the Ext JS Documentation
Reviewing the Ext JS Examples
Working with Ext JS 4 MVC
Exercise 3-1: Getting Started (Part 1 of 2)
Exercise 3-1: Getting Started (Part 2 of 2)
Starting Your Ext JS Project
Instantiating a Viewport
Using a Border Layout
Defining Toolbars
Defining Windows
Creating Your Launch Function
Exercise 3-2: Designing a Viewport
Reading Complex Data from an Application Server
Configuring a Model's Proxy Reader for Data Pagination
Configuring a Store for Data Pagination
Populating a Store with Static Data
Working with Embedded Data Objects
Exercise 3-3: Reading Complex Data from an App Server
Working with Data Bound Views
Instantiating a Combo Box
Viewing Data in Grids
Defining Grouped Grids
Enhancing Grouped Grids
Creating Views and Using Grids (part 1 of 2)
Creating Views and Using Grids (part 2 of 2)
Handling User Interactions
Applying Filters to Stores
Adding and Removing Components
Showing and Hiding Components
Modifying the Contents of Panels
Exercise 3-5: Handling User Interactions
Working with XTemplates
Looping through Data
Implementing Conditional Processing
Executing Inline JavaScript
Binding Custom JavaScript Methods to XTemplates
Performing Basic Calculations in an XTemplate
Binding a Template to a Component
Exercise 3-6: Generating Markup with Templates
Visualizing Data with Ext.chart.Panel
Defining a Data Store to Support Charting
Instantiating a Chart
Configuring Chart Axes
Configuring Chart Labels
Configuring Chart Legends
Adding Chart Series
Adding Chart Highlight Behaviors
Adding Tooltips to Charts
Defining Multiple Chart Series
Exercise 3-7: Visualizing Data
Implementing Data Entry Forms
Configuring Form Fields
Sizing Fields with the Anchor Layout
Assigning Default Configuration Values
Grouping Fields in a FieldContainer
Validating Input Data
Formatting the Data Validation Error Message
Submitting Data to the Server
Exercise 3-8: Implementing a Data Entry Form
Using Sencha Cmd to Create a Production Build
Using Getting Started with Sencha Cmd
Migrating your Sencha Architect Project into Sencha Cmd
Creating a Production Build
Exercise 3-9: Creating a Production Build
Unit Summary
Unit Review
Where to go from here
You can load the Google Maps API via the Sencha Touch microloader framework by modifying your /path/to/app/ app.json file as illustrated below on lines 14-17.
{
"name": "FriendsWithBeer",
"indexHtmlPath": "index.html",
"url": null,
"js": [
{
"path": "../touch/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
},
{
"path": "http://maps.google.com/maps/api/js?sensor=true",
"remote": true
}
],
"css": [
{
"path": "resources/css/app.css",
"update": "delta"
}
],
"appCache": {
"cache": [
"index.html"
],
"network": [
"*"
],
"fallback": []
},
"resources": [
"resources/images",
"resources/icons",
"resources/startup"
],
"ignore": [
"\\.svn$"
],
"archivePath": "archive",
"buildPaths": {
"testing": "build/testing",
"production": "build/production",
"package": "build/package",
"native": "build/native"
},
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": false
},
"id": "59a30a3f-58a1-402c-b3a9-0d84b77359db"
}
Note: Sencha Architect will automatically reconfigure your app.json file to load the Google Maps API
Page of 168
Teach Yourself Sencha Complete in a Day
About Fig Leaf Software
About the Authors
Course Objectives and Prerequisites
Reviewing the Course Format
Outlining the Course
Reviewing the Mobile App
Reviewing the Desktop App
Installing the Courseware
Unit Summary
Unit 2: Teach Yourself Sencha Touch
Understanding Design Challenges with Devices
Designing for Phones
Developing for Tablets
Exercise 2-1: Introducing Sencha Touch
Acquiring the Tools of the Trade
Introducing Sencha Cmd 3
Introducing Sencha Architect
Using Chrome as a Device Emulator
Emulating the Mobile Experience in Chrome
Debugging in Chrome
Programatically Setting Breakpoints
Testing with Simulators and Emulators
Using Ripple
Using the iOS Simulator
Exercise 2-2: Getting Started with Sencha Touch
Getting Started with Sencha MVC
Understanding the MVC file structure
Understanding the Class System
Defining your Application in App.js
Understanding the Role of Ext.Viewport
Managing Projects with Sencha Architect
Exercise 2-3: Using Sencha Architect to Initialize Your App
Defining Views
Using Components
Nesting Components in Containers
Using the hbox and vbox Layout Managers
Using the fit and card Layout Managers
Docking Toolbars, Titlebars, and Buttons
Implementing a Tab Panel
Exercise 2-4: Defining Views
Using Controllers to Handle User Interactions
Using Ext.ComponentQuery to Select Components
Defining Controller Refs and Event Handlers
Exercise 2-5: Handling Interactions with Controllers
Working with Data
Defining a Proxy
Defining a Data Store
Using List Views to Visualize Data
Handling Ext.dataview.List Events
Exercise 2-6a: Reading Data from a Server
Exercise 2-6b: Displaying Data in a List
Developing Forms
Configuring Data Entry Fields
Configuring Text Fields
Configuring Email, Number, and URL Fields
Configuring Select Fields
Loading, Validating, and Saving Form Data
Exercise 2-7a: Creating a Form
Exercise 2-7b: Navigating Between Views
Exercise 2-7c: Validating and Saving Form Data
Exercise 2-7d: Updating and Deleting Data
Lesson 2-8: Implementing Master-Detail Interfaces
Exercise 2-8: Working with Ext.Navigation.View
Implementing Geo Features
Licensing Google Maps
Loading the Google Maps API
Geocoding Addresses
Getting the Current Location
Calculating the Distance Between Two Points
Instantiating a Map View
Adding Map Markers
Making Map Markers Tappable
Exercise 2-9a: Geocoding Addresses
Exercise 2-9b: Calculating Distance to Targets
Exercise 2-9c: Visualizing Data on Maps
Exercise 2-9d: Completing the Friends Detail View
Exercise 2-9e: Building the Friend Randomizer
Adding Multimedia
Working with Images
Working with Audio
Supporting HTML5 Video with Ext.Video
Displaying YouTube Videos
Displaying YouTube Videos with the YouTube iFrame API
Exercise 2-10: Playing HTML5 Video
Introducing Sass and Compass
Understanding Sass Fundamentals
Theming Sencha Touch Apps with Sass
Modifying the Sencha Touch Default Theme
Using Web Fonts and Typography
Adding Transparency Effects
Theming Buttons and Toolbars
Theming Containers and Lists
Using Compass Mixins to Reduce HTTP Requests
Exercise 2-11: Theming your App
Going Into Production
Using Sencha Cmd 3 to Create a Production Web Build
Configuring Architect to Produce Native Apps
Configuring Native Packager Settings
Unit 3: Teach Yourself Ext JS 4
Introducing Ext JS
Reviewing the Ext JS Documentation
Reviewing the Ext JS Examples
Working with Ext JS 4 MVC
Exercise 3-1: Getting Started (Part 1 of 2)
Exercise 3-1: Getting Started (Part 2 of 2)
Starting Your Ext JS Project
Instantiating a Viewport
Using a Border Layout
Defining Toolbars
Defining Windows
Creating Your Launch Function
Exercise 3-2: Designing a Viewport
Reading Complex Data from an Application Server
Configuring a Model's Proxy Reader for Data Pagination
Configuring a Store for Data Pagination
Populating a Store with Static Data
Working with Embedded Data Objects
Exercise 3-3: Reading Complex Data from an App Server
Working with Data Bound Views
Instantiating a Combo Box
Viewing Data in Grids
Defining Grouped Grids
Enhancing Grouped Grids
Creating Views and Using Grids (part 1 of 2)
Creating Views and Using Grids (part 2 of 2)
Handling User Interactions
Applying Filters to Stores
Adding and Removing Components
Showing and Hiding Components
Modifying the Contents of Panels
Exercise 3-5: Handling User Interactions
Working with XTemplates
Looping through Data
Implementing Conditional Processing
Executing Inline JavaScript
Binding Custom JavaScript Methods to XTemplates
Performing Basic Calculations in an XTemplate
Binding a Template to a Component
Exercise 3-6: Generating Markup with Templates
Visualizing Data with Ext.chart.Panel
Defining a Data Store to Support Charting
Instantiating a Chart
Configuring Chart Axes
Configuring Chart Labels
Configuring Chart Legends
Adding Chart Series
Adding Chart Highlight Behaviors
Adding Tooltips to Charts
Defining Multiple Chart Series
Exercise 3-7: Visualizing Data
Implementing Data Entry Forms
Configuring Form Fields
Sizing Fields with the Anchor Layout
Assigning Default Configuration Values
Grouping Fields in a FieldContainer
Validating Input Data
Formatting the Data Validation Error Message
Submitting Data to the Server
Exercise 3-8: Implementing a Data Entry Form
Using Sencha Cmd to Create a Production Build
Using Getting Started with Sencha Cmd
Migrating your Sencha Architect Project into Sencha Cmd
Creating a Production Build
Exercise 3-9: Creating a Production Build
Unit Summary
Unit Review
Where to go from here
Please enable JavaScript to view the comments powered by Disqus.
comments powered by