1. #1
    Sencha User WallTearer's Avatar
    Join Date
    Jan 2012
    Location
    Kiev, Ukraine
    Posts
    19
    Vote Rating
    0
    WallTearer is on a distinguished road

      0  

    Default Unanswered: Modify application from external function/file

    Unanswered: Modify application from external function/file


    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:
    Code:
    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:
    Code:
    ...
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User WallTearer's Avatar
    Join Date
    Jan 2012
    Location
    Kiev, Ukraine
    Posts
    19
    Vote Rating
    0
    WallTearer is on a distinguished road

      0  

    Default


    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):
    Code:
    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:
    Code:
    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.