在extjs 3上调用父类函数

Question

我有这样的 extjs 类用于添加：

    Ext.ns('Example');

Example.Form = Ext.extend(Ext.form.FormPanel, {

   ,initComponent:function() {
        // hard coded - cannot be changed from outsid
        var config = {
            items: [{
            xtype: 'textfield',
            fieldLabel: 'title',
            name: 'author',
            allowBlank: false
          }

         .........................

    ]
            ,buttons:[
                {
                    text:'submit'
                    ,formBind:true
                    ,scope:this
                    ,handler:this.submit
            }]
        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        // call parent
        Example.Form.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    /**
    * Form onRender override
    */
    ,onRender:function() {
        ..................
    } // eo function onRender
    /**
    * Reset
    */
   ,reset:function() {
        this.getForm().reset();
    } // eo function onRender
    /**
    * Load button click handler
    */
    ,onLoadClick:function() {
       ....................
    } 

    ,submit:function() {
        ........................
    } 

    ,onSuccess:function(form, action) {
       ..........................
    } 


    ,onFailure:function(form, action) {
           ......................          
    } // eo function onFailure

    ,showError:function(msg, title) {
         ........................
        });
    } 
}); 

并且我有另一个扩展用于编辑：

Example.Form2 = Ext.extend(Example.Form, {

    ......
 });

如何从第二类中的第一类调用“onLoadClick”函数？因为我想在表单加载之前将数据加载到我的表单中。

Answer 1

如果您有一个类扩展了另一个类，则可以通过在类定义中使用超类属性来调用“父”类方法。

在下面的示例中，我们添加一个特殊函数 mySpecial add 并使其调用父类的 add 函数。

Ext.ux.myForm = Ext.extend(Ext.form.FormPanel, {
   ...
   mySpecialAdd: function(comp, anExtraParam) {
     // some special handling here
     ...
     // call parent class add
     return Ext.ux.myForm.superclass.add.call(this, comp);
   }
})

除了 call 之外，您还可以选择使用 apply

Ext.ux.myForm = Ext.extend(Ext.form.FormPanel, {
   ...
   mySpecialAdd: function(comp, anExtraParam) {
     // some special handling here
     ...
     // call parent class add
     return Ext.ux.myForm.superclass.add.apply(this, [comp]);
   }
})

请注意，“this”仍然是您的新类，因此您覆盖的任何其他函数都将是从父类调用的函数，而不是父类函数。

例子
Ext.form.FormPanel 有一个在 Ext.form.FormPanel.add 中调用的 onAdd 方法，因此，如果您覆盖 onAdd ，则调用的是您的函数。

Ext.ux.myForm = Ext.extend(Ext.form.FormPanel, {
   ...
   mySpecialAdd: function(comp, anExtraParam) {
     // some special handling here
     ...
     // call parent class add
     return Ext.ux.myForm.superclass.add.apply(this, [comp]);
   },
   // even though onAdd is marked as private you are actually still overwriting it here
   // because of the way its implemented in Ext 3
   onAdd: function(c) {
      // this will get called from the parent class (Ext.form.FormPanel) add method.
      ...

      // so make sure you handle it nicely
      Ext.ux.myForm.superclass.onAdd.call(this, c);

      ...
   }
})

Answer 2

如果您需要将超类方法调用到子类的方法中，您可以执行以下操作：

Example.Form2 = Ext.extend(Example.Form, {

    testMethod: function(){
       ...
       //call parent class method
       Example.Form2.superclass.doLoadClick.call(this);
       ...
    }
 });

是您的意思吗？