extjs Common Pitfalls & Best Practices Separate Overrides from Bug Fixes

Example

In ExtJS, you can override nearly any method of the framework and replace it with your own. This allows you to modify existing classes without directly modifying the ExtJS source code.

Sometimes, you may want to enhance an existing class or provide a sane default property on a class.

For example, you may want all of your model data fields to allow null values.

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

In other cases, you will need to fix something that is broken in the framework.

Here is an example of a bug fix with documentation. Note that the classname contains "fix" rather than "override". The actual name isn't important, but the separation is.

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

Now when it comes time to upgrade to the next version of ExtJS, there is only one place you need to check to see which of your bug fixes can be removed.