1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Answers
    7
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default Answered: Alias, xtype, paths and external code

    Answered: Alias, xtype, paths and external code


    Lets say I have a project and all the code is under the structure
    app-> view
    app-> model
    app-> controller
    etc

    Now I have some external code I've pulled in and I've placed it inside a folder (app & externalCode are at the same folder level)
    externalCode -> view
    externalCode -> model
    externalCode -> controller

    Now I wish to use an class in the view folder of externalCode. Lets say it is called Test.js and is defined something like the following
    Code:
    Ext.define('OtherProject.view.Test',{
         extend: 'Ext.panel.Panel',
        alias: 'widget.test',
    So inside one of my view classes how do I create the Test class? I'm trying to use the external classes xtype/alias (widget.test). I've done a bit of changing the xtype and tried changing the paths in the Ext.Loader.setConfig but no joy so far.

  2. By default, ExtJS can't dynamically load third-party widgets by xtype, as it has no way of knowing what class should be loaded for a given xtype since the aliases are specified in the class definition itself and thus not known until after the class is already loaded. (The standard ExtJS widgets don't have this problem, since ExtJS has a built-in mapping of xtypes to class names for the standard widgets.) So, you either need to explicitly declare a dependency on the widget class, or you need to tell ExtJS up-front what class the xtype maps to.

    Using your example, here's how you could list the widget as a dependency:
    Code:
    Ext.application({
        name: 'MyApp',
        requires: ['OtherProject.view.Test'],
        
        launch: function() {
            new Ext.container.Viewport({
                items: [{
                    xtype: 'test'
                }]
            });
        }
    });
    Or you could use Ext.ClassManager.addNameAliasMappings to register the xtype for the class:
    Code:
    Ext.ClassManager.addNameAliasMappings({
        'OtherProject.view.Test': ['widget.test']
    });
    
    Ext.application({
        name: 'MyApp',
        
        launch: function() {
            new Ext.container.Viewport({
                items: [{
                    xtype: 'test'
                }]
            });
        }
    });
    Or, as a final possibility, you could start using Sencha Cmd for your project - it automatically includes class alias mappings for all aliases in a bootstrap file so you don't have to maintain them by hand like this. Of course, it also provides some other nice features too.

  3. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    105
    Answers
    4
    Vote Rating
    5
    Kevin Jackson is on a distinguished road

      0  

  4. #3
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    414
    Answers
    41
    Vote Rating
    60
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      1  

    Default


    By default, ExtJS can't dynamically load third-party widgets by xtype, as it has no way of knowing what class should be loaded for a given xtype since the aliases are specified in the class definition itself and thus not known until after the class is already loaded. (The standard ExtJS widgets don't have this problem, since ExtJS has a built-in mapping of xtypes to class names for the standard widgets.) So, you either need to explicitly declare a dependency on the widget class, or you need to tell ExtJS up-front what class the xtype maps to.

    Using your example, here's how you could list the widget as a dependency:
    Code:
    Ext.application({
        name: 'MyApp',
        requires: ['OtherProject.view.Test'],
        
        launch: function() {
            new Ext.container.Viewport({
                items: [{
                    xtype: 'test'
                }]
            });
        }
    });
    Or you could use Ext.ClassManager.addNameAliasMappings to register the xtype for the class:
    Code:
    Ext.ClassManager.addNameAliasMappings({
        'OtherProject.view.Test': ['widget.test']
    });
    
    Ext.application({
        name: 'MyApp',
        
        launch: function() {
            new Ext.container.Viewport({
                items: [{
                    xtype: 'test'
                }]
            });
        }
    });
    Or, as a final possibility, you could start using Sencha Cmd for your project - it automatically includes class alias mappings for all aliases in a bootstrap file so you don't have to maintain them by hand like this. Of course, it also provides some other nice features too.

Thread Participants: 2

Tags for this Thread