我们如何覆盖 Ext.Base？

Question

我正在使用 Ext JS v7.1 并且我已覆盖 Ext.Base 来为从 Ext.Base 继承的类设置命名方案：这简化了我的调试。

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()
  }
})

此代码之前构建没有错误，但是在我将 Sencha Cmd 升级到 v7.3.0.19 后，我开始出现以下错误：

[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

我不知道这是否是执行此覆盖的正确位置/方式，如果不是，我可以更改我的实现。但是，如果没有其他办法，如何摆脱构建错误？

提前致谢，

伊佩克

Answer 1

因为我不再使用 sencha 构建工具，所以我无法直接帮助您，但我想分享另一种方法：

如果您首先加载了框架（ext-debug-all 或 ext-all 等）并且已经定义了应该被覆盖的类，您可以这样做：

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();
        }
    }
});

根据进一步的内部处理，您可以调用 callParent 或 callSuper。 更多细节在这里：

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

---

您可以将上面的代码移动到函数中并稍后调用它，例如 - 当 Ext.isReady 时。我想这可以解决或解决您面临的一些开放式工具问题。

---

更新：

回到您的问题，您可以执行以下操作并这样定义：

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)
  }
});

我在这里添加了一个示例小提琴。如果设置了 identifiablePrefix，它应该记录“helloWorld”。

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