extjs Common Pitfalls & Best Practices Extend vs Override

Example

Overrides:

Override file:

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Use in app:

{
    xtype: 'textfield'
}

Extensions:

Override file:

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Use in app:

{
    xtype: 'cornfield'
}

Explanation

ExtJS provides two main ways to change the behavior of existing classes: extending them, and overriding them. Each has benefits and pitfalls that should be considered before using them.

Extensions

Extending a class creates a new class that inherits its behavior and configuration from its parent. By creating a new class through extension, repeated configuration and behavioral changes can be made in a central location and reused throughout the application. The biggest advantage of extension is that the parent class remains intact and available for simpler use cases where the extended behavior is not desired.

Examples of good use cases for extensions include custom form fields with special behavior, specialized modals, and custom components in general.

Overrides

Overriding a class modifies the behavior of an existing class in place. Configuration and methods in overrides replace their parent class counterparts entirely, creating new default configurations and behavior that populate throughout the application. Overrides should be used sparingly because of the destructive nature of their use; an extended class can typically provide the same benefits while leaving the parent class undisturbed.

However, overrides can provide benefits in some situations. Good use cases include fixing bugs in existing classes, modifying proxy behavior to append extra information to requests, such as a token or session data, and generally forcing a specific behavior to be the default behavior across an application.