Sencha Touch refs - app.js with 'paths' configuration

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.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.