Sencha Extjs - 正确覆盖方法?

Sencha Extjs - Overriding methods properly?

我有一个简单的覆盖 class。看起来像这样:

Ext.define('Ext.overrides.form.Panel',{
override: 'Ext.form.Panel',
constructor: function() {
    this.callParent(arguments);
},
listeners: {
    afterrender:  {
        fn:function (component, eOpts) {
            var fields = component.getForm().getFields();
            var field =  fields.getAt(0);
            if(typeof field !== 'undefined' && field.isFocusable()) {
                //need to wait before you can focus a field.
                Ext.defer(function() {
                    field.focus(true,200);
                },1);
            }
        }
    }
}

});

如您所见,我正在尝试覆盖 afterRender 事件,以便在呈现表单后表单中的第一个字段将获得焦点。 这是有效的,除了我的应用程序中的某些表单在 afterrender 事件中为自己实现一些代码。看起来他们正在覆盖我在上面定义的这个方法。

我可以将这段代码复制到那些表单中,但如果我可以使用 this.callParent(arguments) 之类的方式调用上面的代码会更好吗?在那些形式? 我实际上已经尝试过,但问题是我的那些表单的渲染代码在视图控制器范围内。所以 'this' 引用的范围是错误的 Ext.Base.

这应该有效:

Ext.define('Ext.overrides.form.Panel',{
  override: 'Ext.form.Panel',
  constructor: function() {
    this.callParent(arguments);

    this.on({
      afterrender: function (component, eOpts) {
            var fields = component.getForm().getFields();
            var field =  fields.getAt(0);
            if(typeof field !== 'undefined' && field.isFocusable()) {
                //need to wait before you can focus a field.
                Ext.defer(function() {
                    field.focus(true,200);
                },1);
            }
        }
    });
  }
});