Sencha Extjs - 正确覆盖方法？

Question

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

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 范围。

Answer 1

这应该可行：

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