Search code examples
extjsloader

How does one do Ext.Require when the init function creates a viewport?


I'm trying to 'require' some code for the loader, but my current onready function is giving me grief with the require ( it complains about the viewport not being created yet ). Since I assign content to the viewport on creation, I cant really require the content that I populate ( unless I create the viewport and then assign stuff to it, but meh ).

How the heck do I Ext.require[] with a function like this? ( or how can I restructure this function so it performs in the same way, whilst letting me run Ext.Require on an array?)

Host=function(){
return{
    centerPanelId: 'mainLayoutCenter',
    init: function(){
        //Enable the loader for dynamic loading of js, only dev pls
        Ext.Loader.setConfig({enabled:true});
        Ext.QuickTips.init(); //ext needs this

        Ext.Loader.setPath("bleh","js/bleh"); //Project paths for the loaders

        if(!window.User){
            this.initialContent = Ext.create('bleh.Login');
        }

        //Our default View
        //this.initialContent = Ext.create('bleh.panel.Register');

        this.currentContent=this.initialContent;
        //Instantiate a viewport 
        this.viewport = Ext.create("bleh.viewport",{
            initialContent : this.initialContent
            ,host:this
        });

        //init function, to hande events for HTML elements etc
        //bleh.init();

    }

    ,setContent: function( contentPanel ){

       var center = Ext.getCmp(this.centerPanelId);

       if ( this.currentContent ) { center.remove(this.currentContent); }

       this.currentContent = contentPanel;
       center.add(this.currentContent);    
       center.doLayout(); 
       this.currentContent.show();
    }       

}               
}();            
Ext.onReady( Host.init, Host ); 

Solution

  • You should be able to just require whatever you need before this block of code. It's already wrapped in an onReady block, so it will not be executed until all dependencies are available by default, as long as you require them. Just add this above your code:

    Ext.require([
        'bleh.login',
        'bleh.viewport'
    ]);