Understand the Sencha MVC File Structure

Sencha applications are built using the Model-View-Controller (MVC) pattern. Each app is composed of a collection of Models, Views, Controllers, Stores and Profiles brought together by a central Application file.

• Application - an instance of Ext.application defined in app.js, the main entry point for the app. The Application loads the Models, Views, Controllers, Stores and Profiles into the app and contains the app launch function.
  
• Models - represent the different tables created in the mobile app database. For example, the Equipment Survey contains models for the Task, Task Floor, Task Floor Drawing and the Survey.
  
• Views: control how the data is presented to the user
  
• Controllers: contain code to handle view actions and listen for user interactions with the view, such as finger swipes and taps.
  
• Stores: an array of Model instances. Stores can also sort, filter, group and validate data.
  
• Profiles: customize the app for tablets and phones

Common Models and Stores shared across apps are kept in the ab-products/common/mobile/src/Common folder.

The AppLauncher is an example of an Application with a relatively simple app structure:

Ext.application({
    models : [ 'Common.model.App', 'AppLauncher.model.Registration' ],
    stores : [ 'Common.store.TableDefs', 'Common.store.AppPreferences', 'Common.store.Apps' ],
    views : [ 'Registration', 'Preferences', 'AppSelection', 'ChangeUrl' ],
    controllers : [ 'Registration', 'Preferences' ],
    name : 'AppLauncher'
});

File: ab-products/common/mobile/src/AppLauncher/app.js