Results 1 to 8 of 8

Thread: Dynamic Class Load

  1. #1
    Sencha User
    Join Date
    Nov 2015
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: Dynamic Class Load

    Hi Everyone! Can't get why my Dynamic Class Load doesn't work.

    In the folder Classes I have file Classes/SomeClass.js

    Code:
    Ext.define('SomeClass', { SomeClassProperty:'SomeClassData',
     SomeClassMethod:function(text){alert(text);}
    });

    I have file App.js
    Code:
    Ext.Loader.setConfig({enabled: true,    paths:{'SomeClass':'Classes'}
        });
    
    
    Ext.require('SomeClass');
    
    
    Ext.onReady(function(){
    
    
     var myinstance = Ext.create('SomeClass');
     alert(myinstance.SomeClassProperty);
     myinstance.SomeClassMethod('hello');
    
    
    });

    I have Main.html
    Code:
    ...
    <link rel="stylesheet" type="text/css" href="/ExtJS/www/Styles/theme-neptune/resources/theme-neptune-all.css">
    <script type="text/javascript" src="/ExtJS/www/ext-all.js"></script>
    <script type="text/javascript" src="App.js"></script>
    ...
    Problem
    When I Start happens nothing...

    My Temporary solution
    But if i do following 2 steps

    -put file SomeClass.js in the same folder
    -delete from App.js Ext.Loader.setConfig instruction

    everything begin to work, but in this way i have to put all files with Classes in the same folder where Main.html - that's not good.

    So could you help me to understand how to make it work!

  2. The reason is actually right in front of you:

    Code:
    Ext.Loader.setConfig({
        enabled: true,    
        paths: {
            SomeClass: 'Classes'
        }
    });
    You are telling Ext.Loader that the namespace of SomeClass starts at Classes so when you require SomeClass, it maps to Classes. It doesn't know that you actually mean Classes/SomeClass.js

    This is what I'd do, nest my classes in my application's namespace. So say I'm gonna name my app 'MyApp', then you'd have MyApp map to Classes:

    Code:
    Ext.Loader.setConfig({
        enabled: true,    
        paths: {
            MyApp: 'Classes'
        }
    });
    Your SomeClass would then be renamed to MyApp.SomeClass:

    Code:
    Ext.define('MyApp.SomeClass', { 
        SomeClassProperty: 'SomeClassData',
        
        SomeClassMethod: function(text) {
            alert(text);
        }
    });
    Now when you require MyApp.SomeClass:

    Code:
    Ext.require('MyApp.SomeClass');
    it'll attempt to load it form Classes/SomeClass.js (the file name is exactly the same as the class name, case-sensitive).

    If you had another class named MyApp.foo.Bar then this class would then be located at Classes/foo/Bar.js (once again, case-sensitive). Notice the file structure is nested like the class' namespace is.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,356
    Answers
    3997
    Vote Rating
    1499
      0  

    Default

    The reason is actually right in front of you:

    Code:
    Ext.Loader.setConfig({
        enabled: true,    
        paths: {
            SomeClass: 'Classes'
        }
    });
    You are telling Ext.Loader that the namespace of SomeClass starts at Classes so when you require SomeClass, it maps to Classes. It doesn't know that you actually mean Classes/SomeClass.js

    This is what I'd do, nest my classes in my application's namespace. So say I'm gonna name my app 'MyApp', then you'd have MyApp map to Classes:

    Code:
    Ext.Loader.setConfig({
        enabled: true,    
        paths: {
            MyApp: 'Classes'
        }
    });
    Your SomeClass would then be renamed to MyApp.SomeClass:

    Code:
    Ext.define('MyApp.SomeClass', { 
        SomeClassProperty: 'SomeClassData',
        
        SomeClassMethod: function(text) {
            alert(text);
        }
    });
    Now when you require MyApp.SomeClass:

    Code:
    Ext.require('MyApp.SomeClass');
    it'll attempt to load it form Classes/SomeClass.js (the file name is exactly the same as the class name, case-sensitive).

    If you had another class named MyApp.foo.Bar then this class would then be located at Classes/foo/Bar.js (once again, case-sensitive). Notice the file structure is nested like the class' namespace is.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Nov 2015
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thank you for the answer, mitchellsimoens!!! So i've done what you suggested but still it doesn't start the instance of SomeClass. What am I doing wrong ?

    I have the following structure of files

    FileStructure.JPG

    Now i have following codes...

    Classes/SomeClass.js

    Code:
    Ext.define('MyApp.SomeClass', 
    { SomeClassProperty:'SomeClassData',
     SomeClassMethod:function(text){alert(text);}
    });
    App.js
    Code:
    Ext.Loader.setConfig({enabled: true,
        paths:{'MyApp':'Classes'}
        });
    
    Ext.require('MyApp.SomeClass');
    
    Ext.onReady(function(){
     var myinstance = Ext.create('SomeClass');
     alert(myinstance.SomeClassProperty);
     myinstance.SomeClassMethod('hello');
    });


    Main.html
    Code:
    ...
    <link rel="stylesheet" type="text/css" href="/ExtJS/www/Styles/theme-neptune/resources/theme-neptune-all.css">
    <script type="text/javascript" src="/ExtJS/www/ext-all.js"></script>
    <script type="text/javascript" src="App.js"></script>
    ...

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,356
    Answers
    3997
    Vote Rating
    1499
      0  

    Default

    Code:
    var myinstance = Ext.create('SomeClass');
    isn't using the new name, should be:

    Code:
    var myinstance = Ext.create('MyApp.SomeClass');
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Nov 2015
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Wow! That is the fastest answer!!! Thank you very much. Now it works fine !!!

  7. #6
    Sencha User
    Join Date
    Nov 2015
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Also i wanted to ask, according to your message

    If you had another class named MyApp.foo.Bar then this class would then be located at Classes/foo/Bar.js (once again, case-sensitive). Notice the file structure is nested like the class' namespace is.
    Each class must be in separate file? Or I may put many classes in 1 file? I ask because I've read on that forum that when we create the final product the best practice is to put all classes in one file to allow browser work faster rather than loading classes from 1000 files.

    Thanks in advance!

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,356
    Answers
    3997
    Vote Rating
    1499
      0  

    Default

    In development, it's best to have one class per file mainly for maintainability. When you're going to deploy to production, then you do a build.

    In all honestly, to make the build and development process easier, I'd always recommend Sencha Cmd.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #8
    Sencha User
    Join Date
    Nov 2015
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default

    That's clear! I will continue exploring Sencha!

Similar Threads

  1. [FIXED] [2.1.1] Class loader tries to load already defined class
    By SamuraiJack1 in forum Sencha Touch 2.x: Bugs
    Replies: 3
    Last Post: 16 Apr 2013, 2:18 PM
  2. Replies: 4
    Last Post: 23 Aug 2011, 6:14 PM
  3. Dynamic load class
    By cybervirax in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 21 Jan 2011, 12:19 AM
  4. Dynamic Javascript Class Load and Instantiation
    By gcallaghan in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 21 Dec 2010, 11:35 AM
  5. Replies: 15
    Last Post: 1 May 2007, 2:14 AM

Posting Permissions

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