Sencha Touch button has no response to Tap event

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.

score 0 · Answer 1 · answered Nov 06 '12 at 12:24

0

Change your refs to

refs:{
        userButton: '#adduserButton'
    }

And the Control As

control: {
        userButton: {

Hope this helps you

answered Nov 06 '12 at 12:24

Oxi

2,918
17
28

Hello @Jaffer, i did what you said, and but its still not working. Thanks – user1802827 Nov 06 '12 at 12:43
@user1802827 please make sure putting an alert inside tap: function() that this function is getting called – Oxi Nov 06 '12 at 13:02
i comment all the code inside the tap: function(), leaving just an alert and it doesnt "alert" when the button is pressed, is the reference correct? Maybe the controller cant link to the button on the view, but i tried a few ways to reference to the button... – user1802827 Nov 06 '12 at 13:10

score 0 · Answer 2 · answered Nov 07 '12 at 05:45

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

Hi @Naresh, its still not working...but wouldnt make more sense if i implement the launch function instead of the init since i would run this code after the controller is created? Correct me if im wrong. Thanks. — user1802827, Nov 07 '12 at 10:55

score 0 · Answer 3 · answered May 09 '13 at 10:15

0

Add

controllers: [
    'App.controller.Adduser',

],

in app

answered May 09 '13 at 10:15

user2365819

31
4

Sencha Touch button has no response to Tap event

3 Answers3