Results 1 to 5 of 5

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

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    107
    Answers
    1

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

    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"

    Code:
    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.
    Last edited by andrej_marincic; 22 Oct 2013 at 11:04 AM. Reason: typo

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    107
    Answers
    1

    Default

    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
    Last edited by andrej_marincic; 22 Oct 2013 at 2:49 PM. Reason: typo

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    107
    Answers
    1

    Default

    Hi Evan,

    one more thing i noticed.

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

    example:

    Code:
    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?
    Last edited by andrej_marincic; 23 Oct 2013 at 5:33 AM. Reason: typo

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    107
    Answers
    1

    Default

    Ok i found it myself,

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

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

Posting Permissions

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