How can we override Ext.Base?

user_12299857 0
Viewed 259

I am using Ext JS v7.1 and I have overridden Ext.Base to set my naming scheme for the classes that inherits from Ext.Base: This eases my debugging.

Ext.define('App.class.Base', {
  override: 'Ext.Base',

  constructor: function() {
    var me = this

    /**
     * App.base.store.Base => store-base-
     * App.store.Menu => store-menu-
     */
    if (me.isIdentifiable) {
      if (!me.self.prototype.hasOwnProperty('identifiablePrefix')) {
        const classNameParts = me.$className.match(/([^\.]+)/g)
        if (classNameParts && classNameParts[0] === 'App') {
          classNameParts.splice(0, classNameParts.length - 2)
          me.self.prototype.identifiablePrefix = classNameParts.reduce((i, j) => i + '-' + j).toLocaleLowerCase() + '-'
        }
      }
    }

    return me.callParent()
  }
})

This code was building before without an error but, after I upgraded Sencha Cmd to v7.3.0.19, I started the get the following error:

[ERR] C2016: Override target not found -- /...../packages/local/module-core/overrides/class/Base.js:2:64
[WRN] Override App.class.Base in file /..../packages/local/module-core/overrides/class/Base.js had no target detected

I don't know whether this is the right place/way to do this override, if not I can change my implementation. However, if there is no other way, how can get rid of the build error?

Thanks in advance,

Ipek

extjs7 extjs
1 Answers

Because i am not using sencha build tools anymore, i can not help you directly but i would like to share another approach:

In case you have loaded the framework (ext-debug-all or ext-all, etc.) first and the class which should get overwritten is already defined you can do it like that:

Ext.Component.override({
    initComponent: function () {
        Ext.log('bootstraping ' + this.self.getName());
        var me = this,
            width = me.width,
            height = me.height;

        // If plugins have been added by a subclass's initComponent before calling up to here (or any components
        // that don't have a table view), the processed flag will not have been set, and we must process them again.
        // We could just call getPlugins here however most components don't have them so prevent the extra function call.
        if (me.plugins && !me.plugins.processed) {
            me.plugins = me.constructPlugins();
        }
        me.pluginsInitialized = true;

        // this will properly (ignore or) constrain the configured width/height to their
        // min/max values for consistency.
        if (width != null || height != null) {
            me.setSize(width, height);
        }

        if (me.listeners) {
            me.on(me.listeners);
            me.listeners = null; //change the value to remove any on prototype
        }

        if (me.focusable) {
            me.initFocusable();
        }
    }
});

Depending on the further internal processing you can call callParent or callSuper. More details here:

You may be able to move this upper code inside a function and call it later, for example - when Ext.isReady. I guess this can solve or tackle some of the open tooling issues you are facing.

UPDATE:

Coming back to your question you can do the following and define it like that:

Ext.Base.override({
    constructor: function() {
    var me = this

    /**
     * App.base.store.Base => store-base-
     * App.store.Menu => store-menu-
     */
    if (me.isIdentifiable) {
      if (!me.self.prototype.hasOwnProperty('identifiablePrefix')) {
        const classNameParts = me.$className.match(/([^\.]+)/g)
        if (classNameParts && classNameParts[0] === 'App') {
          classNameParts.splice(0, classNameParts.length - 2)
          me.self.prototype.identifiablePrefix = classNameParts.reduce((i, j) => i + '-' + j).toLocaleLowerCase() + '-'
        }
      }else{
          console.log('isIdentifiable');
            console.log(me.identifiablePrefix);
      }
    }

    return me.callParent(arguments)
  }
});

I have added an exampole fiddle here. It should log "helloWorld" in case identifiablePrefix is set.

https://fiddle.sencha.com/#view/editor&fiddle/3a8i

user_18161390
Related