Extending class dynamically with ext.define() - how to?

[andrej_marincic]

Hi dear sirs/madams,

I am developing MVC app with lots of controllers.
Sometimes i need to instantiate several instances of same controller (please don't ask me why i do that).

Now i now, that there can exists only 1 instance of each controller, that is why i try to do something like this:

Lets say i want to load 3 instances of controller "MyController"

for(var x=1; x <= 3; x++){

   Ext.define('MyApp.controllers.MyController_' + x, {
      requires: ['MyApp.controllers.MyController'],
      extend: 'MyApp.controllers.MyController' 
   });
  
   this.getController('MyApp.controllers.MyController_' + x);
}

So i am extending controller classes "on the fly" so i can have multiple instances (well not exactley, i know) of the same controller.

The problem is that Extjs tries to load "MyApp.controllers.MyController_1", "MyApp.controllers.MyController_2", "MyApp.controllers.MyController_3".

Why is that?

If those files exists on the server everything works as expected.

Please help.

[evant]

please don't ask me why i do that

Why do you do that? It's probably important clarify why you're going down that path, doesn't really sound like an optimal solution.

[andrej_marincic]

Hi Evan,

Well my app is organized into "modules". My modules are nothing else but controllers with associated views. When i instantiate module (controller) i also tell it where to render its associated view (i specify container). And i can render the same "module" (controller + associated view) into different placeholders (containers).

Lets say, i have Tab panel, in 3 tabs there is module "HTML editor" for example. So i need to create 3 instances of HTML editor controller (+ 3 instances of associated view which is HTML editor component in this case). I know there are different aproaches, but i decided to go this way.

That is why i want to instantiate multiple instances of the same controller. This works for my app.

I find out that if i "dynamically" define class which extends some other base class, which isn't loaded yet, than Ext.define fails. Base class is loaded, but for some reason new class isn't defined.

Can you please help me with that?

best reagrds, andrej

[andrej_marincic]

Hi Evan,

one more thing i noticed.

Newly defined class gets really defined after some time, in my case 50 ms.

example:

Ext.define('ABC',{
    requires: [
         'WS.view.shop.Producteditor' /* this is just some view, prosume it is Ext.panel.Panel and it is not loaded yet to client but it should loaded when needed */
    ],
     views: [
         'WS.view.shop.Producteditor'
      ],
      extend: 'WS.inc.Controller' 
});

console.log(Ext.isDefined(ABC)); // this fails, because ABC is somehow not defined

Ext.Function.defer(function(){console.log(Ext.isDefined(ABC));}, 50); //here, after 50ms, ABC is defined and i can use it

As i understand, when Loader comes to dependencies it goes to Synchronous mode and tries to load all dependencies, so i don't understand why ABC is not ready to use just after defining it, but only after some time elapsed (in my case 50 ms)

Can you please advise me?

[andrej_marincic]

Ok i found it myself,

If i explicitly call "Ext.syncRequire" than it works:

Ext.syncRequire('MyApp.controllers.MyController');

for(var x=1; x <= 3; x++){   
   Ext.define('MyApp.controllers.MyController_' + x, {      
   extend: 'MyApp.controllers.MyController'    
});

this.getController('MyApp.controllers.MyController_' + x);}

best regards,
Andrej.