I have a login with username and password, and a button with login. I want to send data from username and password to server-side PHP.
Ext.require([
'Ext.form.Panel',
'Ext.layout.container.Anchor'
]);
var log = Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: 'login',
title: 'Login section',
bodyPadding: '10 10 0',
width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'User Name',
anchor: '-5',
name: 'first',
id: 'userName'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '-5',
name: 'password',
inputType: 'password',
id: 'password'
}]
}
],
buttons: ['->', {
text: 'Login',
name: 'submit',
/*listeners: {
tap: function () {
var form = Ext.getCmp('userName');
//var values = form.getValues();
Ext.Ajax.request({
url: 'index.php',
params: form,
success: function (response) {
var text = response.responseText;
Ext.Msg.alert('asfasfaf', text);
},
failure: function (response) {
Ext.Msg.alert('Error', 'Error while submitting the form');
console.log(response.responseText);
}
});
}
}*/
/* handler: function () {
Ext.Ajax.request({
url: 'index.php',
method: 'POST',
params: Ext.getCmp('userName').getValue(),
success: function (response) {
Ext.Msg.alert('success ' + Ext.getCmp('userName').getValue());
},
failure: function (response) {
Ext.Msg.alert('server-side failure with status code ' + response.status);
}
});
}*/
},
{
text: 'Register?'
}]
});
});
Ext.getCmp('userName').getValue();
You can use the Ext Form's submit method from within your button handler, e.g.:
// ....
buttons: [{
text: 'Submit!',
handler: function(btn) {
btn.up('form').getForm().submit({
url: 'mybackend.php',
success: function(ret) {},
failure: function(ret) {},
});
}
}],
// .....
I see that you have already tried to extract values and send request to php. May be this structure will help you. But you have to be sure that your php url accepts parameters with names 'param1' and 'param2' (or whatever your php accepts:) )
{
xtype : 'button',
text : "Submit"
formBind : true,
handler : function() {
var userName = this.up('form').down('#userName');
var password = this.up('form').down('#password');
Ext.Ajax.request({
url: url, // your php url
method: 'POST',
params: {param1: userName, param2:password },
disableCaching: false,
success: function(response, opts)
{
var text = response.responseText; // for debugging print text and decodedText
var decodedText = Ext.decode(text);
if(decodedText.success)
{
}
}
failure: function()
{
}
});
}
}