Results 1 to 3 of 3

Thread: Modify application from external function/file

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

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User WallTearer's Avatar
    Join Date
    Jan 2012
    Location
    Kiev, Ukraine
    Posts
    19
    Vote Rating
    0
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •