In my Sencha Architect project I'm trying to add a Ext.ux.StatusBar to the bottom of a panel. I'm trying to do this by adding a launch function to my Application. But I'm getting an error. Does anyone know the correct way to do this in Sencha Architect?

Here is the code from app.js
Code:
Ext.Loader.setConfig({    enabled: true
});


Ext.application({
    models: [
        ...
    ],
    stores: [
        ...
    ],
    views: [
        'WmtViewport'
    ],
    autoCreateViewport: true,
    name: 'WheresMyTransaction',


    launch: function() {
        Ext.Loader.setPath('Ext.ux', 'http://extjs.cachefly.net/ext-4.0.7-commercial/examples/ux');


        Ext.require([
        'Ext.ux.statusbar.StatusBar'
        ]);


        Ext.getCmp('SearchToolbar').up('#WmtViewport').down('#TransDetailTabPanel').addDocked(new Ext.ux.StatusBar({id: 'my-status', text: 'Ready to go', dock: 'bottom'}));
    }


});
But in the console I get the following error from the attempt to create the status bar:

Uncaught TypeError: undefined is not a function app.js:60
Ext.application.launch app.js:60
Ext.define.onBeforeLaunch ext-all-debug.js:39716
(anonymous function) ext-all-debug.js:39695
isEvent ext-all-debug.js:10516
fire ext-all-debug.js:10658
Ext.EventManager.onDocumentReady ext-all-debug.js:10780
Ext.Loader.onReady.fn ext-all-debug.js:4816
Ext.Loader.triggerReady ext-all-debug.js:4797
Ext.Loader.refreshQueue ext-all-debug.js:4473
Ext.Loader.refreshQueue ext-all-debug.js:4504
Ext.Loader.refreshQueue ext-all-debug.js:4504
Ext.Loader.onFileLoaded ext-all-debug.js:4747
(anonymous function) ext-all-debug.js:1548
Ext.Loader.injectScriptElement.onLoadFn ext-all-debug.js:4519

The problem I think is that the code to create a new instance of the status bar class executes before the StatusBar.js file is loaded because its all happening synchronously...

However if I execute the offending line of code in the console after the application has finished loading, it works just fine?!

Code:
Ext.getCmp('SearchToolbar').up('#WmtViewport').down('#TransDetailTabPanel').addDocked(new Ext.ux.StatusBar({id: 'my-status', text: 'Ready to go', dock: 'bottom'}))
Does anyone know the correct way to do the above in Sencha Architect? Also, it it possible to 'add' the Ext.ux.statusbar.StatusBar component to Architect so that one can drag and drop it onto the canvas like any other Ext JS component?

Thanks,
--Greg