call parent class function on extjs 3 - class

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

Answer 2

If you need to call a superclass method into a method of the subclass, you can do something like this:
Example.Form2 = Ext.extend(Example.Form, {
testMethod: function(){
...
//call parent class method
Example.Form2.superclass.doLoadClick.call(this);
...
}
});
Is that what you mean ?