问在ExtJS中重写类/属性的最佳实践？

EN

澄清：真正的类修改我指的是对类的永久修改/扩展，这应该总是通过扩展类来完成的。但它不是针对特定问题(错误修复等)的临时解决方案。

至少有四个选项可以覆盖(Ext)类的成员

我猜

• prototype是众所周知的，它允许您重写一个类的所有实例的成员。你可以像这样使用它

Ext.view.View.prototype.emptyText = ""；

虽然你不能像这样使用它

//原型函数= Ext.form.field.Text.prototype.setValue (Val){ var me = this，inputEl = me.inputEl；if (inputEl && me.emptyText && !Ext.isEmpty(value)) { inputEl.removeCls(me.emptyCls)；me.valueContainsPlaceholder = false；}me.callParent(参数)；me.applyEmptyText()；return me；}；

这是一个

这个变体不应该用于实际的类修改。

• 的功能与prototype几乎相同，但它完全适用于允许使用callParent()的ExtJS类系统

你可以像这样使用它

//允许callParent用于覆盖Ext.override('Ext.form.field.Text'，{ setValue: function(val) { this.callParent('In override')；return this；} })；

这是一个 (c-p错误已修复！感谢@nogridbag)

用例：我遇到了一个(我认为仍然存在)放射线组的糟糕行为，ExtJS需要一个对象(键-值对)来正确设置值。但是我的后端只有一个整数。我首先使用为setValue()方法应用了一个修复，然后从radiogroup扩展。在这里，我只需要从给定值生成一个键值对，并用它调用父方法。

正如 提到的，这可以用来覆盖实例成员。因此可能有资格覆盖甚至是mixins (我自己从未测试过它)

var Ext.Panel=新面板({ ... })；面板(Ext.override，{ initComponent: Ext.Panel () { //额外处理...this.callParent()；} })；

此变体不应用于实际类修改。

• Extending一个现有的类来应用额外的行为和渲染。使用此变体可以创建行为不同的子类型，而不会丢失原始类型。

在下面的示例中，我们使用一个方法扩展文本字段，该方法在设置一个名为setColored的新值时更改labelcolor，并覆盖setValue方法，以便在直接调用setValue时删除标签颜色

Ext.define('Ext.ux.field.Text'，{ extend：'Ext.form.field.Text'，widget：'uxtextfield'，setColored:函数(val，颜色){ var me = this；if ( me.settedCls ) { me.removeCls(me.settedCls)；}me.addCls(颜色)；me.settedCls=颜色；me.setValue(val，true)；}，setValue: function(val，take) { var me = this；if (!take && me.settedCls) { me.removeCls(me.settedCls)；}me.callParent(参数)；return me；} })；

这里是每个实例的

• Overriding 将在非常罕见的情况下发生，并且可能不适用于所有属性。在这种情况下(我手头没有示例)，您只需要一个不同的行为，并且可以考虑只覆盖每个实例的设置。基本上，当您在创建类时应用配置时，您总是会做这样的事情，但大多数情况下，您只是覆盖配置属性的默认值，但您也能够覆盖引用函数的属性。这完全覆盖了实现，您可能会允许不能访问基本类型(如果存在)，这意味着您不能使用callParent。您可以尝试使用setValue来查看它不能应用于现有的链。但同样，您可能会遇到一些罕见的情况，在这种情况下，这是有用的，即使它只是在开发时重新实现以提高生产效率。在这种情况下，您应该在通过使用上面提到的Ext.override创建特定的之后应用覆盖。

重要提示:如果不使用Ext.override!，则无法通过调用this来访问类实例

如果我漏掉了什么或什么是(不再)正确的，请发表评论或随时编辑。

正如评论的那样

这些方法都不允许覆盖混合(如Ext.form.field.Field)。由于在定义类时会将混合函数复制到类中，因此必须将覆盖直接应用于目标类

@sra的回答很棒，对我更深入地理解Ext中可用的覆盖功能非常有帮助，但它不包括我通常实现覆盖的方式，如下所示：

Ext.define('my.application.form.field.Text' {
    override: 'Ext.form.field.Text'
    getValue: function () {
        // your custom functionality here
        arguments[1] = false;

        // callParent can be used if desired, or the method can be 
        // re-written without reference to the original
        this.callParent(arguments)
    }
});

我仍然在使用Ext5，所以我会将这个文件加载到我的Application.js中，并将其添加到requires数组中，该数组将覆盖全局应用程序。我认为Ext6项目包含一个override文件夹，只需将此文件添加到该文件夹即可确保应用override。

这是我在ExtJS 7中唯一可以使用的方式。

示例：

app/desktop/overrides/Toast.js

Ext.define(null, {
    override: 'Ext.window.Toast',
    show : function () {
        this.callParent();
// Your custom code here...
    }
});