PDA

View Full Version : button form submit without a form id



Shining77
11 Dec 2011, 10:29 AM
My code is the following:



Ext.onReady(function(){

FreelancerCommunicationForm = Ext.extend(Ext.form.FormPanel, {

initComponent:function(config) {
Ext.apply(this, {
title: 'Test,
...
items: [{...}],
buttons: [{
text: 'Bearbeiten',
handler: function(btn){
var form = btn.ownerCt;
form.submit({
success: function(resp,opt) {
...
},
failure: function(resp,opt) {
...
}
});
}
}
]
});

FreelancerCommunicationForm.superclass.initComponent.apply(this, arguments);

}


});

});



My question: How can I submit the form with the button without using an ID for the form?

The "var form = btn.ownerCt;" does not work.

mitchellsimoens
12 Dec 2011, 11:44 AM
Couple different ways... since you are doing everything within the initComponent you can create a variable in the initComponent and now that variable is available from your button handler:


initComponent: function() {
var form = this;

.....

{
text : 'Button',
handler : function() {
form.submit({...});
}
}

.....
}

Or you can use findParentByType on the button and pass an xtype in your handler:


handler : function(btn) {
var form = btn.findParentByType('form');

form.submit({...});
}

I would prefer to use the findParentByType.

Shining77
12 Dec 2011, 11:58 AM
When I am using

var form = this

the console said: form.submit is not a function.

When I am using

btn.findParentByType('formpanel')

the form-object is null


What might be the problem?

mitchellsimoens
12 Dec 2011, 12:21 PM
I'm sorry, submit is on the basic form... form.getForm().submit()

Here is a sample:


var form = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
height : 400,
buttons : [
{
text : 'Submit',
handler : function(btn) {
var form = btn.findParentByType('form'),
basic = form.getForm();

basic.submit({...});
}
}
]
});

Shining77
12 Dec 2011, 12:44 PM
The problem still exists that the form-object is null, so I cannot use the getForm()-method

mitchellsimoens
12 Dec 2011, 12:49 PM
The example code worked 100%... in fact you can copy and paste the handler code and see if it works.

Shining77
12 Dec 2011, 1:00 PM
Here is my complete code:



FreelancerCommunicationForm = Ext.extend(Ext.form.FormPanel, {
initComponent:function(config) {
Ext.apply(this, {
title: i18n_label_menu_mydata_communication,
url: '/freelancer/communication_update.htm',
width: 620,
minSize: 620,
frame: true,
labelWidth: 180,
items: [{
xtype: 'hidden',
name: 'id',
value: freelancerId
},{
xtype: 'textfield',
fieldLabel: i18n_telephone,
name: 'telephone',
value: freelancerCommunicationTelephone,
width: 220
},{
xtype: 'textfield',
fieldLabel: i18n_telephone2,
name: 'telephone2',
value: freelancerCommunicationTelephone2,
width: 220
},{
xtype: 'textfield',
fieldLabel: i18n_mobile,
value: freelancerCommunicationMobile,
name: 'mobile',
width: 220
},{
xtype: 'textfield',
fieldLabel: i18n_email,
value: freelancerCommunicationEmail,
name: 'email',
width: 220
}
],

buttons: [{
text: i18n_update,
handler: function(btn){
var form = btn.findParentByType('form'),
basic = form.getForm();

basic.submit({
success: function(resp,opt) {
Ext.Msg.alert(i18n_state, i18n_label_dataChangeSuccessful);
},
failure: function(resp,opt) {
Ext.Msg.alert(i18n_error, i18n_label_dataChangeError);
}
});
}
}
]
});

FreelancerCommunicationForm.superclass.initComponent.apply(this, arguments);

}


});


The click on the button says:

form is null

laurentParis
12 Dec 2011, 5:32 PM
FreelancerCommunicationForm = Ext.extend(Ext.form.FormPanel, {
initComponent: function (config) {
var form = this; // it's here !important
Ext.apply(this, {
title: 'test',
url: '/freelancer/communication_update.htm',
width: 620,
minSize: 620,
frame: true,
labelWidth: 180,
items: [{
xtype: 'hidden',
name: 'id',
value: ''
}, {
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'telephone',
value: '0101010101',
width: 220
}, {
xtype: 'textfield',
fieldLabel: 'Phone2',
name: 'telephone2',
value: '06020102',
width: 220
}, {
xtype: 'textfield',
fieldLabel: 'Mobile',
value: '06010201',
name: 'mobile',
width: 220
}, {
xtype: 'textfield',
fieldLabel: 'Email',
value: '[email protected]',
name: 'email',
width: 220
}],

buttons: [{
text: 'submit',
handler: function (btn) {
var basic = form.getForm();

basic.submit({
success: function (resp, opt) {
Ext.Msg.alert('title', 'msg');
},
failure: function (resp, opt) {
Ext.Msg.alert('error', 'msgError');
}
});
}
}]
});

FreelancerCommunicationForm.superclass.initComponent.call(this, config);

}

});

Ext.onReady(function () {
new FreelancerCommunicationForm({
renderTo: document.body
});
});