Define new xtype fields sencha touch MVC

Question

I have to create a new xtype in my sencha application but I don't know where I have to put the code. I tried to create a new file and add it in views array in app.js but it doesn't work because my new xtype is a field not a view

Ext.define('Dynamo.field.PatternText', {
extend : 'Ext.field.Text',
xtype  : 'patterntextfield',

config : {
    pattern : '[0-9]*'
},

updatePattern : function(pattern) {
    var component = this.getComponent();

    component.updateFieldAttribute('pattern', pattern);
},

initialize : function() {
    this.callParent();

    var component = this.getComponent();

    component.input.on({
        scope   : this,
        keydown : 'onKeyDown'
    });
},

onKeyDown : function(e) {
    var code = e.browserEvent.keyCode;

    if (!(code >= 48 && code <= 57) && !(code >= 97 && code <= 105) && code !== 46 && code !== 8 && code !== 188 && code != 190) {
        e.stopEvent();
    }
}

});

Answer 1

Usually, custom made components are declared under the Ext.ux namespace.

You can put the file anywhere you want as long as you configure the Ext.Loader correctly:

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

Using this config you could put all of your custom components in the js/ux folder for auto loading. For this particular file the path would be js/ux/Field/PatternText.js

Also you need to use the correct namespace for extending the field:

Ext.define('Ext.ux.field.PatternText', {
    extend : 'Ext.form.field.Text',