how can I override a the textfield component in extjs and use it in multiple forms accross the app?

Question

I am thinking of creating a file called MyTextField.js in views and its contents are

Ext.define('MyTextField',
{

override: 'Ext.field.Input',
xtype: 'mytextfield',

    updateValue: function(newValue) {
        var input = this.input;
        if (input && input.dom.value != newValue) {
            input.dom.value = newValue;
        }
    }
});

And then use this in my other view FormView.js

Ext.define('AnotherScreen', {
    extend: 'Ext.form.Panel',
    xtype: 'anotherscreen',
    controller: 'controllerx',
    viewModel: 'viewmodelx',
     requires: [
        'MyTextField'
    ],
    layout: 'vbox',
    items: [
             { xtype : mytextfield}
    ]

});

But this is not working, it returns an error

**

Uncaught Error: [Ext.create] Unrecognized class name / alias: 
MyTextField

**

Any idea is very welcome.

Answer 1

You have at least three issues, one of them is missing quotes around the xtype (should be xtype : 'mytextfield').

override tells Ext to override the old component. So Ext.field.Input is overridden with the updateValue function you defined. This changes every existing input field because they all derive from Ext.field.Input (e.g. textfield, combo etc.), but it does not create a new xtype by the name of "mytextfield". To create a new xtype, you extend an existing class (extend:'Ext.field.Input').

At last, the idea when using requires is that the path and name of the file and the qualified name of the view match. If you have an application called MyAppName, you define in app/view/MyTextField.js the component MyAppName.view.MyTextField. When you then use requires:['MyAppName.view.MyTextField'], the file path should be correctly resolved and you can reference the component by xtype from there on.