ExtJS - Form submit
38,938
As I already said, it seems that you have problems with your code. You are passing Ext.form.Panel options to a Ext.window.Window (I assuming this because the name of the method that you are calling). I'm writing an example with a window for you. Just a moment.
It is ready. Take a look:
Ext.create('Ext.window.Window', {
title: 'This is a Window with a Form',
height: 200,
width: 400,
layout: 'fit',
items: [{ // the form is an item of the window
id: 'admin-win',
title: 'Add administration users',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
xtype: 'form',
bodyPadding: 15,
url: 'save-form.php',
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField',
allowBlank: false
}],
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
} else {
Ext.Msg.alert( "Error!", "Your form is invalid!" );
}
}
}]
}]
}).show();
jsFiddle: http://jsfiddle.net/davidbuzatto/vWmmD/
Author by
michail_w
Cloud developer/architect. AWS, C#, Docker, PHP, JavaScript
Updated on May 13, 2020Comments
-
michail_w almost 4 years
I've got code:
win = desktop.createWindow({ id: 'admin-win', title: 'Add administration users', width: 740, height: 480, iconCls: 'icon-grid', animCollapse: false, constrainHeader: true, xtype: 'form', bodyPadding: 15, url: 'save-form.php', items: [{ xtype: 'textfield', fieldLabel: 'Field', name: 'theField' }], buttons: [{ text: 'Submit', handler: function () { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function (form, action) { Ext.Msg.alert('Success', action.result.message); }, failure: function (form, action) { Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response'); } }); } } }] });
And buttons doesn't work. It creates error - this.up('form') is undefined. How can I call getForm() in such code like that?
UPDATE: Thanks for really quick reply! I modified your code for my needs, this is it, and it works with Desktop Example:
win = desktop.createWindow({ id: 'admin-win', title: 'Add administration users', width: 740, iconCls: 'icon-grid', animCollapse: false, constrainHeader: true, items: [{ xtype: 'form', bodyPadding: 15, url: 'save-form.php', items: [{ xtype: 'textfield', fieldLabel: 'Field', name: 'theField' }], buttons: [{ text: 'Submit', handler: function () { var form = this.up('form').getForm(); if (form.isValid()) { this.up().up().submit({ success: function (form, action) { Ext.Msg.alert('Success', action.result.message); }, failure: function (form, action) { Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response'); } }); } } }] }] });
-
davidbuzatto over 11 yearsIs this your complete code? What desktop.createWindow do? I'm asking this because it seems that you are trying to crete a window but using Ext.form.Panel options.
-
michail_w over 11 yearsIt's based on ExtJS Desktop Example. I want to create window with form only.
-
-
michail_w over 11 yearsThanks :-) I updated my 1st post, because I don't have permission to answer for my topics ;-) I've got to modify your code for my needs.
-
davidbuzatto over 11 yearsYou are welcome! As I said, you were indeed passing Ext.form.Panel options to a Ext.window.Window :) ExtJS is very nice. Take a look in its documentation because it is very complete.