What is Sencha Touch? Jay Garcia and Mitch Simoens, authors of Sencha Touch in Action, give a presentation on everything Sencha Touch. This presentation is for developers of all skill levels.

1. @ModusCreate
Sencha Touch in Action
Thursday, May 16, 13

2. @ModusCreate
About us
Thursday, May 16, 13

3. @ModusCreate
What is SenchaTouch
• The first and best mobile-
centric HTML 5 framework
• Provides the foundation to
develop kick ass cross platform
mobile Web apps
• Built on the best Web
Standards
Thursday, May 16, 13

4. @ModusCreate
A peek under the hood
• Robust class inheritance model
• Full Component lifecycle
• Observable event model
• Elaborate Container model
• Configureable layout managers
• Robust packaging system
Initialization
Render Destruction
Thursday, May 16, 13

5. @ModusCreate
AboutThe Book
• Took over 2 years to develop
• Originally started early 2010
• Touch 1.1
• Started from scratch Fall of 2010
• Touch 2.0 targeted
• Touch 2.2 covered today
Thursday, May 16, 13

6. @ModusCreate
Who’s this book for?
• Anyone looking to develop
mobile HTML5 apps with
Touch
• Must have skills:
• JavaScript
• HTML5
• CSS
Thursday, May 16, 13

7. @ModusCreate
Who’s this book for?
• Anyone looking to develop
mobile HTML5 apps withTouch
• Must have skills:
• HTML5
• CSS
• JavaScript
Thursday, May 16, 13

8. @ModusCreate
What does this book cover?
• Part 1:
• Intro toTouch 2
• Downloading the
framework
• Looking at the package
contents
• Building a basic application
Thursday, May 16, 13

9. @ModusCreate
What does this book cover?
• Part 2:
• Event system
• DOM, Class
• Layouts
• All of them!
• Components
• Basic to complex
• Data package
• Models
• Stores
Thursday, May 16, 13

10. @ModusCreate
What does this book cover?
• Part 3:
• OOJS
• Class system
• Extensions & Plugins
• Building an app
• Deploying an HTML5 app
• Sencha Cmd
Thursday, May 16, 13

11. @ModusCreate
CH10 Building a custom
extension
Thursday, May 16, 13

12. @ModusCreate
Inheritance challenge
Ext.dataview.DataView
Ext.dataview.ListItem
Ext.Container
Ext.dataview.List
Thursday, May 16, 13

13. @ModusCreate
Inheritance challenge
Two extensions needed to be created!
Ext.dataview.DataView
Ext.dataview.ListItem
Ext.Container
Ext.dataview.List
Ext.ux.ActionList Ext.ux.ActionListItem
Thursday, May 16, 13

14. @ModusCreate
Implementation Challenges
• Detect swipe gesture
• Show / Hide actions
• DOM injections
• Register tap event
• Prevent item selection
• Manage scroll
Thursday, May 16, 13

15. @ModusCreate
ActionListItem does most work
• Detect swipe gesture
• Show / Hide actions
• DOM injections
• Register tap event
• Prevent item selection
• Manage scroll
Thursday, May 16, 13

16. @ModusCreate
Detect swipe gesture
• Detect swipe gesture
• Show / Hide actions
• DOM injections
• Register tap event
• Prevent item selection
• Manage scroll
Thursday, May 16, 13

17. @ModusCreate
Detect swipe gesture
1) Register drag and dragend
handlers
Thursday, May 16, 13

18. @ModusCreate
Detect swipe gesture
2) Manage drag event
Thursday, May 16, 13

19. @ModusCreate
Detect swipe gesture
3) Inject DOM & animate
Thursday, May 16, 13

20. @ModusCreate
Detect swipe gesture
4) Perform cleanup
Thursday, May 16, 13

21. @ModusCreate
Coming soon: SenchaTouch video training
moduscreate.com/training/video
Thursday, May 16, 13

22. @ModusCreate
Questions?
• Book URL: manning.com/garcia2
• Contact info:
• twitters:
• @moduscreate
• @ModusJesus
• jay@moduscreate.com
Thank you!
Thursday, May 16, 13