PDA

View Full Version : Overriding Ext.form.BasicForm constructor ?



howe
23 Jan 2011, 2:03 PM
Hello,

Ok, I need help in this one. How do I override Ext.form.BasicForm constructor ? It's easy with Ext.Component descendants, but BasicForm descends from Ext.util.Observable.

I've tried Ext.createInterceptor(), Ext.createSequence(), Ext.apply(), Ext.override(), none worked. Ex:


Ext.form.BasicForm = Ext.form.BasicForm.createSequence(function (el, config) {
console.log('overrided!') // never prints anything when form is created.
}



constructor: function (el, config) {
Ext.form.BasicForm.superclass.constructor(el, config);
console.log('overrided!')
};


I've also tried overriding on Ext.form.BasicForm.constructor, but didn't work. I just need to setup some vars on the constructor, so if if the above works, I'm done.

Wrapping Ext.form.BasicForm in a function, replacing the original class with a function, also didn't work.

Thanks!
Howe

AndreaCammarata
23 Jan 2011, 3:25 PM
Hi howe.
I think you are making confusion:
Ext.form.BasicForm it's not a Sencha Touch class, Ext.form.FormPanel is a Sencha Touch class.
In fact, if you write in your javascript debug console


Ext.form.FormPanelyou will see this output



function () { superclass.apply(this, arguments); }
if you write


Ext.form.BasicFormyour output will be



undefined
You can't override the constructor of an undefined class.

Hope this helps.

EDIT:
Sorry I made confusion! This is not Sencha Touch forum, so don't consider my post. Sorry.

EDIT 2:
Why this post is placed inside the Sencha Touch forum? Do you need help with Ext or Sencha Touch? I can't understand!

howe
23 Jan 2011, 3:32 PM
Hello, Andrea

I really meant Ext.form.BasicForm, it is an ExtJS class used internally by Ext.FormPanel:

http://dev.sencha.com/deploy/dev/docs/source/BasicForm.html#cls-Ext.form.BasicForm

I'm not sure which version are you using, but here I use ExtJS 3.3.1 and have:


>>> Ext.form.BasicForm
function()

Thanks,
Howe

mitchellsimoens
23 Jan 2011, 4:40 PM
What do you mean put some vars? Like you are trying to send extra parameters when you submit the form? If so you can do this without any overriding:


FormPanel.getForm().submit({
params: {
paramName: "param value",
test: "hello"
}
});

howe
23 Jan 2011, 4:43 PM
Hello Mitchell,

I'm subclassing BasicForm so that it sends json, xml or whatever I define, in a specific format my application server understands.
I really need to override the constructor.

Thanks,
Howe

mitchellsimoens
23 Jan 2011, 4:44 PM
Extend it and set it under the form property.

howe
23 Jan 2011, 4:47 PM
Hello Mitchell,

I want an override so that it works globally, including code that was not wrote from me. That's why I asked "override", not "extending".

There must be a way to override the constructor, I just want to know how's that.

Thanks!
Howe

mitchellsimoens
23 Jan 2011, 4:50 PM
I wouldnt... but you can... so whats stopping you?

Check out Ext.override or do it yourself...

howe
23 Jan 2011, 4:52 PM
Hello Mitchell,

As I said in the first post - because it isn't working with any of the methods I tried. It simply ignores the new constructor.

Regards,
Howe

AndreaCammarata
23 Jan 2011, 4:53 PM
This is a sample example on how to do what you request



Ext.onReady(function() {

Ext.ns('ux');

ux.myForm = Ext.extend(Ext.form.BasicForm, {

constructor: function(el, config){

ux.myForm.superclass.constructor(el, config);

alert('override');

}

});

var customForm = new ux.myForm();

});


Hope this helps.

AndreaCammarata
23 Jan 2011, 4:53 PM
This is a simple example that allow you do do what you request.


Ext.onReady(function() {

Ext.ns('ux');

ux.myForm = Ext.extend(Ext.form.BasicForm, {

constructor: function(el, config){

ux.myForm.superclass.constructor.call(this, el, config);

alert('overrided!');

}

});

var customForm = new ux.myForm();

});


In the first part of this example you define your custom BasicForm extending the standard Ext BasicForm, and with the line



var customForm = new ux.myForm();


You create a new instance of your custom BasicForm.

Hope this helps.

mitchellsimoens
23 Jan 2011, 5:01 PM
But of course not make you extensions within the onReady

AndreaCammarata
23 Jan 2011, 5:03 PM
But of course not make you extensions within the onReady
Yes, of course, my Ext.onReady was only to give you a full example, it's better that you put your extension inside a .js apart.

howe
23 Jan 2011, 6:52 PM
Hello Andrea,

Thanks, but that's extending. Extending works. I need overriding. I don't know how I can be any clearer. I need all existing forms to have the new behavior I'm adding, including other subclassed forms from other developers.

This won't help.

Thanks,
Howe

howe
24 Jan 2011, 8:22 AM
Hello,

Is there anyone from the Ext support to answer this one, please ?

Thanks!
Howe

mitchellsimoens
24 Jan 2011, 8:31 AM
As I have said before, use Ext.override then... Look at this post, it will hopefully show you how to use it

http://www.sencha.com/forum/showthread.php?122097-Why-does-Ext.form.Field.setValue()-not-fire-an-event&p=564585#post564585

howe
24 Jan 2011, 11:42 PM
Hello Mitchell,

I've tried that one as well, won't work, that's the root of my problem: it seems "override" ignores construtors, or I'm doing something wrong.
In the following code, the overridden constructor is ignored. You can try yourself.


(function() {
var old_constructor = Ext.form.BasicForm.prototype.constructor;
Ext.override(Ext.form.BasicForm, {
constructor : function(el, config){
console.log('worked!');
old_constructor(el, config)
}
});
}())


Thanks,
Howe

amarkiewicz
26 Jan 2011, 6:55 AM
Yes, of course, my Ext.onReady was only to give you a full example, it's better that you put your extension inside a .js apart.


Why would you not want extensions in the onReady?
Would that cause memory leaks?

mitchellsimoens
26 Jan 2011, 7:12 AM
Because you should have all classes and components defined before you are ready to build the app.

AndreaCammarata
26 Jan 2011, 7:22 AM
Exactly what mitchell said.

mitchellsimoens
26 Jan 2011, 7:39 AM
For the OP, this is working for me:


Ext.ns("Ext.form.ux");
Ext.form.ux.BasicForm = Ext.extend(Ext.form.BasicForm, {
constructor: function(el, config) {
console.log("Hello");
Ext.form.ux.BasicForm.superclass.constructor.call(this);
}
});


Ext.onReady(function() {
var submitForm = function() {
var basic = form.getForm();
basic.submit({
url: "form_return.php",
success: function() { console.log("Form Successs"); },
failure: function() { console.log("Form Failed"); }
});
}

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
frame: true,
width: 400,
title: "Test Form",
defaultType: "textfield",
defaults: { anchor: "100%" },
createForm : function(){
var config = Ext.applyIf({listeners: {}}, this.initialConfig);
return new Ext.form.ux.BasicForm(null, config);
},
items: [
{ fieldLabel: "Test", name: "test", value: "go test" },
{ fieldLabel: "Hello", name: "hello", value: "Hi!" }
],
buttons: [
{ text: "Submit", handler: submitForm }
]
});
});

So this works but if you are wanting to convert everything to JSON then you have two ways... You can create your own Ext.Ajax.request or you can also create your own Ext.form.Action which just sends the form as an Ext.Ajax.request

amarkiewicz
26 Jan 2011, 8:32 AM
Because you should have all classes and components defined before you are ready to build the app.

Is there any reason though other than coding style?
Without a technical reason, it just sounds like dogma.
I do agree that definitions are better off in another file for modularity, make the app cleaner, etc.
I'm new to JS and ExtJS so just curious about that unqualified statement about onReady.
Thanks.

mitchellsimoens
26 Jan 2011, 9:20 AM
Each class should be in it's own file for development. You cannot use something if it is not made so to ensure this you do it outside the onReady function.

If you are building an app, the onReady function should really only have a few lines. One to instantiate the app and others for some configurations that you may/may not need like to start up the ToolTips or what not.

howe
27 Jan 2011, 11:10 PM
Ok, just to finish this thread: I used another approach since when Ext.overriding, the constructors are simply ignored: I overrided the FormPanel.createForm() method. Now it works as I wanted.

Thanks for all that replied.

Howe