Loader problem with requires

[frsantos]

I'm trying to use "requires" to load missing parts in a component, but I get an error when the class is not loaded explicitly with Ext.require (these components are seldom used, so I don't want to load them each time for all users, just only when needed).

I have tested the following code with 4.0.7 and 4.1b2, but they both fail with the error "Cannot call method 'substring' of undefined"

 
    Ext.Loader.setConfig({      enabled:true,
      paths:{
        'Ext.ux':'/extjs/examples/ux'
      }
    });

    // Ext.require("Ext.ux.CheckColumn");

    Ext.onReady(function() {
      Ext.define('Ext.app.Grid', {
        extend: 'Ext.grid.Panel',
        requires:['Ext.ux.CheckColumn'],
        alias: "widget.mygrid",
        width: 300,
        store: {
          fields:['name', 'mark'],
          data:[
            { 'name':'Lisa',  "mark":true  },
            { 'name':'Bart',  "mark":true  },
            { 'name':'Homer', "mark":false },
            { 'name':'Marge', "mark":false }
          ]
        },
        columns:[
          { header:'Name',  dataIndex:'name', flex:1 },
          { header:'Mark?', dataIndex:'mark', xtype:'checkcolumn'}
        ]
      });

      Ext.widget("mygrid", {renderTo: Ext.getBody()});
    });

When uncommenting the Ext.require() line or not using the requires option at all, the grid loads without problems.

Am I missing something or is there a problem in the loader?

Regards,
Quico

[mitchellsimoens]

You shouldn't use Ext.define within onReady. Using b1, this works with no problems for me:

Ext.Loader.setConfig({
    enabled:true,
    paths:{
        'Ext.ux':'SDK/extjs/examples/ux'
    }
});

Ext.require("Ext.ux.CheckColumn");

Ext.define('Ext.app.Grid', {
    extend: 'Ext.grid.Panel',
    requires:['Ext.ux.CheckColumn'],
    alias: "widget.mygrid",

    width: 300,
    store: {
        fields:['name', 'mark'],
        data:[
            { 'name':'Lisa',  "mark":true  },
            { 'name':'Bart',  "mark":true  },
            { 'name':'Homer', "mark":false },
            { 'name':'Marge', "mark":false }
        ]
    },
    columns:[
        { header:'Name',  dataIndex:'name', flex:1 },
        { header:'Mark?', dataIndex:'mark', xtype:'checkcolumn'}
    ]
});

Ext.onReady(function() {
    Ext.widget("mygrid", {renderTo: Ext.getBody()});
});

[frsantos]

Hi,

Yes, the example works as intented with that modification, but my code, which is way more complex, is still no working. I'm very busy these days, so I can not extract another test that fails. I'll come back later when I have some more time to debug.

Thanks.

[frsantos]

OK, I think I found the failing case: just add a new class that inherits from Ext.app.Grid:

Ext.Loader.setConfig({
    enabled:true,
    paths:{
        'Ext.ux':'SDK/extjs/examples/ux'
    }
});


Ext.require("Ext.ux.CheckColumn");


Ext.define('Ext.app.Grid', {
    extend: 'Ext.grid.Panel',
    requires:['Ext.ux.CheckColumn'],
    alias: "widget.mygrid",


    width: 300,
    store: {
        fields:['name', 'mark'],
        data:[
            { 'name':'Lisa',  "mark":true  },
            { 'name':'Bart',  "mark":true  },
            { 'name':'Homer', "mark":false },
            { 'name':'Marge', "mark":false }
        ]
    },
    columns:[
        { header:'Name',  dataIndex:'name', flex:1 },
        { header:'Mark?', dataIndex:'mark', xtype:'checkcolumn'}
    ]
});

Ext.define('Ext.app.Grid2', {
    extend: ['Ext.app.Grid']
});

Ext.onReady(function() {
    Ext.widget("mygrid", {renderTo: Ext.getBody()});
});