Sencha Touch - Calling function within view does not get called

Question

Ive just started to explore sencha. Stuck up with this. Help Appreciated :)

This is my java script code, in the below line handler function i am calling the following the method, which in under items and parent xtype form-panel.

  {
     xtype:'panel',
     defaults:{
        xtype:'button',
        style:'margin: 0.1em',
        flex:1
     },
     layout:{
        type:'hbox',
        align:'center'
     },
     items:[
        {
           text:'Submit',
           handler:this.makeReq,
           scope:this
        },
        {
           text:'Terms & Conditions',

        }
     ]
  }

This is the method that am calling in the above function, but it seems does not happen anyting.

makeReq: function() {
    alert("Hey There");
}

Answer 1

I really suggest you follow the Sencha Touch 2 MVC model in this case. You can give your button an action like this:

{
    text:'Submit',
    action: 'submit'
}

Then you can refer this button and set the function for it inside your app's controller:

config: {
    refs: {
        submitButton: 'button[action=submit]',
    },

    control: {
        submitButton: {
            tap: 'makeReq'
        },
    },

    makeReq: function() {
        alert("Hey There");
    }
}