ExtJS3.4.0重写Ext.Button的OnRender事件报callParent不支持错误如何解决

错误原因 #

• callParent是ExtJS 4.0及更高版本才提供的API，用于在重写/继承组件时调用父类同名方法，ExtJS 3.4版本不存在该方法，因此调用会抛出不支持的错误。

正确实现代码 #

ExtJS 3.x中需要直接调用父类原型的对应方法，同时透传所有入参保证原逻辑正常执行，你可以根据需求选择以下任意一种写法：

写法1：直接调用父类方法 #

Ext.override(Ext.Button, {
    onRender: function (ct, position) {
        // 调用父类原生onRender逻辑
        Ext.Button.superclass.onRender.call(this, ct, position);
        
        // 权限控制逻辑，替换为你实际的session取值逻辑
        const hasPermission = session.yourPermissionKey;
        this.setDisabled(!hasPermission);
        
        console.log('do something');
    }
});

写法2：缓存原生方法调用（兼容性更强） #

// 缓存原生onRender方法避免父类继承链变更导致的异常
const originalButtonOnRender = Ext.Button.prototype.onRender;
Ext.override(Ext.Button, {
    onRender: function (ct, position) {
        // 执行原生逻辑，自动透传所有入参
        originalButtonOnRender.apply(this, arguments);
        
        // 权限控制逻辑
        const hasPermission = session.yourPermissionKey;
        this.setDisabled(!hasPermission);
        
        console.log('do something');
    }
});

注意事项 #

• 重写组件原生方法时必须透传原方法的所有入参，onRender方法原生需要传入容器对象ct和渲染位置position两个参数，省略会导致按钮渲染异常。
• 权限取值逻辑请替换为你项目中实际从session对象中获取对应按钮权限的代码。

内容的提问来源于stack exchange，提问作者Salman Rafique