call parent class function on extjs 3

Question

i have extjs class like this for Add:

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

and i have another extend for Edit:

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

    ......
 });

how i can call "onLoadClick" function from first class in secound class?because i want to load data to my form before form load.

Answer 1

If you have one class that extends another class you can call the "parent" class methods by using the superclass property on your class definition.

In the example below we add a special function mySpecial add and make it call the parent classes add function.

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

instead of call you can also choose to use 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]);
   }
})

Do note that "this" will still be your new class, so any other function that you overwrite will be the one called from the parent class and not the parent class function.

Example Ext.form.FormPanel have an onAdd method that is being called in Ext.form.FormPanel.add, so if you overwrite onAdd then its your function that is called.

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

      ...
   }
})