By Alvin Alexander. Last updated: June 6, 2016
Until now I haven’t had a Sencha Touch app.js example out here, so here’s one:
Ext.Loader.setConfig({ enabled: true, paths: { 'VP.util': 'app/util/VP' } }); Ext.application({ name: 'RadioMobile', requires: [ 'Ext.MessageBox' ], controllers: [ 'RadioMobile.controller.TimeControlsController', 'RadioMobile.controller.RadioStationsController', 'RadioMobile.controller.RadioStreamsController', 'RadioMobile.controller.RecordedStreamsController', 'RadioMobile.controller.PodcastsController' ], views: [ 'RadioMobile.view.MainTabPanel', 'RadioMobile.view.TimeControlsPanel' ], models: [ 'RadioMobile.model.Podcast', 'RadioMobile.model.RadioStation', 'RadioMobile.model.RadioStream', 'RadioMobile.model.RecordedStream' ], stores: [ 'RadioMobile.store.Podcasts', 'RadioMobile.store.RadioStations', 'RadioMobile.store.RadioStreams', 'RadioMobile.store.RecordedStreams' ], icon: { '57': 'resources/icons/Icon.png', '72': 'resources/icons/Icon~ipad.png', '114': 'resources/icons/Icon@2x.png', '144': 'resources/icons/Icon~ipad@2x.png' }, isIconPrecomposed: true, startupImage: { '320x460': 'resources/startup/320x460.jpg', '640x920': 'resources/startup/640x920.png', '768x1004': 'resources/startup/768x1004.png', '748x1024': 'resources/startup/748x1024.png', '1536x2008': 'resources/startup/1536x2008.png', '1496x2048': 'resources/startup/1496x2048.png' }, launch: function() { // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Initialize the main view Ext.Viewport.add(Ext.create('RadioMobile.view.MainTabPanel')); }, onUpdated: function() { Ext.Msg.confirm( "Application Update", "This application has just successfully been updated to the latest version. Reload now?", function(buttonId) { if (buttonId === 'yes') { window.location.reload(); } } ); } });
It shows a number of Sencha app.js concepts. The most important and original code is probably this block:
Ext.Loader.setConfig({ enabled: true, paths: { 'VP.util': 'app/util/VP' } });
With that block of code I can put my utilities class named Util.js under a directory named app/util/VP, and then later refer to it in my code like this:
Ext.define('RadioMobile.controller.RadioStationsController', { extend: 'Ext.app.Controller', requires: [ 'VP.util.Util' ] // more code here ... // in some function ... var result = VP.util.Util.decodeJSON(conn.responseText);
Without that path configuration I couldn’t use the code this way.