How can we override Ext.Base?

Question

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

The error doesn't actually break your build though, right? I opened a Sencha Support thread a few months ago on this exact issue, and the support engineer and myself both came to the conclusion that the error is not actually an error, and that they're going to downgrade how it appears in Sencha Cmd in the ticket OTOOLS-66. — incutonez, Sep 17 '20 at 02:47
Thanks for the reply @incutonez. It does break the build, before it didn't. Actually it breaks the "production" build: `sencha app build -production -uses`. But when I do a `test` build it doesn't give either an error or a warning. — kpax, Sep 17 '20 at 13:19
Hmm, if that's the case, I would encourage you to create a Sencha Support ticket, as this seems pretty urgent. — incutonez, Sep 17 '20 at 13:28
Wish I could've actually helped! When you get an answer from Sencha Support, if you could add the answer here, that would be much appreciated. — incutonez, Sep 17 '20 at 13:46

hwsw · Answer 1 · 2020-11-16T16:07:27.530

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:

https://docs.sencha.com/extjs/6.5.3/classic/Ext.Class.html#cfg-override

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

How can we override Ext.Base?

1 Answers1