The document outlines the structure of a Sencha Touch application, focusing on the MVC (Model-View-Controller) architecture. It discusses the roles of models, views, and controllers, and emphasizes the benefits of reducing complexity and improving maintainability. Additionally, it highlights the common file structure and tools for generating projects, which aids in consistent support and cross-compatibility.

2. Structuring your Sencha
Touch application
by Tommy Maintz
@tommymaintz

3. Session Goals
Understand MVC
MVC in Sencha Touch
Common file structure
Generators & Build Tools

5. MVC
Models, Views & Controllers

6. Benefits
Reduce architectural complexity
Flexibility and maintainability.

7. Models
Manages the data of the application
Provide data in its current state
Allows you to change state

8. Views
Renders the model into a form suitable for interaction
Multiple views can exist for a single model

9. Controllers
Receives input
Instructs the model and views

10. Controller
View Model
DIRECT CONNECTION
INDIRECT CONNECTION

11. Sencha MVC

12. Platform
Same MVC codebase
Share Models, Stores, Controllers

13. Managers
Ext.regApplication()
Ext.regModel()
Ext.regStore()
Ext.regController()
Ext.reg()

14. Application

15. Model

16. Store
t ’s i t. . .
l l y, tha
R ea

17. View
mil iar?
Lo ok s fa e n ts
c om pon
s ar e UI
V ie w

18. Controller

19. Common file structure

20. Benefits
Learn it once
Easier support
Sharing between projects
Enables use of Sencha Command

27. Sencha Command
Generate projects, controllers, models and stores
Cross-OS

28. Let’s build an app!

29. Questions?