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