EXTJS4 extend class

[Maxi.Net]

Hola grupo,

Estoy usando extjs4 y necesito crear mis propios componentes en base a los que trae el framework (Ej: gridpanel, numberfield, panel, window, etc). Estoy usando la estructura MVC que proponen en la documentación y hasta el momento todo funciona bien. El problema está en;

Para usar los componentes creados por mí lo hago de la siguiente manera:

Código PHP:

  //Codigo js de la view que se llama como ventana al hacer doble  clic en la grid que muestra los registros (esa parte funciona bien)
...
xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name'
                    },
                  //asi uso los componentes creados por mí  
                  Ext.create('DirectivaApp.directiva.form.field.Number',{
                        name: 'edad',
                        fieldLabel: 'Edad',
                        minValue: 0                       
                    })
                ]
... 
   

Y la idea es usarlos como un xtype, con lo cual deberia quedar de la siguiente manera:

Código PHP:

  //Codigo js
...
xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name'
                    },
                   //Donde "dnumberfield" es el alias usado en la definición de mi clase (sin el widget; segun he visto en algunos articulos.)
                    {   
                       xtype: 'dnumberfield',
                        name: 'edad',
                        fieldLabel: 'edad',
                       minValue: 0
                     }
                ]
... 
   

Definicion de mi clase extendida de numberfield:

Código PHP:

  Ext.define('DirectivaApp.directiva.form.field.Number', {
    extend: 'Ext.form.field.Number',
    alias: 'widget.dnumberfield',
    constructor: function() {
        this.callParent(arguments);
    }
}); 
   

Definición de mi clase app.js:

Código PHP:

  //Seteamos la imagen en blanco por defecto al directorio de nuestro proyecto
 
//Cargamos las librerias de "Directiva" para nuestro proyecto
Ext.Loader.setPath({
    'DirectivaApp.directiva': 'gui/app/directiva/src'
 
});
 
//Render de la view
Ext.application({
    name: 'DirectivaApp',
    appFolder: 'gui/app',
    controllers: [
        'Users'
    ],
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items:[{
                region: 'west',
                collapsible: true,
                split: true,
                title: 'Navigation',
                width: 150
            }, {
                region: 'center',
                xtype: 'tabpanel', // TabPanel itself has no title
                activeTab: 0,      // First tab active by default
                items: {
                    xtype: 'userlist'
                }
            }
        ]
        });
    }
}); 
   

El error que me lanza es:
Uncaught TypeError: Cannot call method 'substring' of undefined

Saludos amigos y gracias por la ayuda