Sencha Touch button has no response to Tap event - button

Question

i'm new in sencha touch and i'm having a weird problem with a button. I'm using mvc, and i have:
Adduserview.js
Ext.define('App.view.Adduserview', {
extend: 'Ext.form.Panel',
xtype: 'adduserview',
requires: ['Ext.form.FieldSet','Ext.field.Select','App.store.Companies'],
config: {
id: 'userform',
items: [
{
xtype: 'fieldset',
title: 'Details',
items:[
{
xtype: 'textfield',
name: 'userName',
label: 'Name'
},
{
xtype: 'textfield',
name: 'userLastname',
label: 'Lastname'
},
{
xtype: 'textfield',
name: 'userNumber',
label: 'Number'
}
]
},
{
xtype: 'fieldset',
title: 'Links',
items: {
xtype: 'selectfield',
label: 'Company',
store: Ext.create('App.store.Companies'),
displayField: 'companyName',
valueField: 'companyName'
}
},
{
xtype: 'button',
text: 'Send',
id: 'adduserButton'
}
]
}
});
Adduser.js
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
},
control: {
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
}
}
});
function notNull(a) {
if(a!="" && !(a.match(/^\s+$/))){
return true;
}
else{
return false;
}
};
The problem is that the button does not work, it just does nothing when pressed, and i have other two FormPanels exactly like that but with different data, and each of them has a controller just like the one i showed but with different code in the tap function, and they work. I noticed that when i see the scripts that are loaded in chrome, the Adduser.js is not there, so i guess thats the reason its not working, but im not sure why its not loading.
By the way i added the controllers to App.js.
Thanks for the help.

Answer 1

Change your refs to
refs:{
userButton: '#adduserButton'
}
And the Control As
control: {
userButton: {
Hope this helps you

Answer 2

update your controoler code with
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
}
},
init: function () {
this.control({
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
});
},
}
});

Answer 3

Add
controllers: [
'App.controller.Adduser',
],
in app