Modify application from external function/file

[WallTearer]

Hello.
I'm creating a Sencha Touch application and trying to add items (to the panel of application) from external function.
The app is defined in one file, here is it's basic initialization:

new Ext.Application({
    name: 'App',
    launch: function(){        
        App.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'hbox'
        });
    }
});

In another file I have a function that tries to add an item to the panel:

...
App.views.viewport.add( { html: 'test item' } );
...

And I see an error: 'Uncaught TypeError: Cannot call method 'add' of undefined', I'm pretty sure that this is caused because the line that adds an item is called before the App is initialized.
So is there a way to add items (basically, modify application) outside of the application code?
Maybe Ext has some method that will execute code once the app is created (something like jQuery .ready() event)?
Thank you.

[mitchellsimoens]

You should setup a controller and use Ext.dispatch after you have created your viewport. Or add a listener to your viewport for the afterrender and do the Ext.dispatch, useful to be event driven.

[WallTearer]

Thanks for the quick response.
Tbh, I'm afraid I didn't really understand your approach. I can't see how it might help me here, if the code that performs App.views.viewport.add() is executed before the App code is executed, which means that listeners are also not initialized at that moment.

Meanwhile I've come up with my own solution - I've changed a bit the way how the system works.
Now I'm registering global array that holds the objects that're modifying App. And when App is initialized, in it's launch method I'm using this array with objects.
Yep, I know that it's not the best solution, cause I'm involving global variable here, and it doesn't look consistent, but at least I've found a workaround.
Here is the file where objects are generated (pasting here only the basic stuff):

var questions = [];


function Build(data)
{
    var question = new Question(data);    
    questions.push(question);
}


function Question(data)
{    
    this.output = function()
    {
        App.views.viewport.add( { html: 'test item' } );
    }        
}

And the base code of the application:

new Ext.Application({
    name: 'App',
    launch: function(){                
        App.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'hbox'
        });
        
        // Rendering questions      
        for ( var i=0; i < questions.length; i++ )
            questions[i].output();
        // Force this  layout to be recalculated according to added questions
        App.views.viewport.doLayout();        
    }
});

Another important thing that I've found in docs, that in order to show the updates in the viewport, the doLayout() method should be called.

P.s. I'll leave this thread as unanswered for a while, maybe somebody will post another solutions.