Extract text from input extjs and send it to php - php

Question

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?'
}]
});
});

Answer 1

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()
{
}
});
}
}

Answer 2

Ext.getCmp('userName').getValue();

Answer 3

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) {},
});
}
}],
// .....