Question

I have added a button as shown in the code below, I have added id:'submitBtn' so when this button is clicked the controller class MyController will get called and execute.

1.) How does the code know that it should go execute the Controller class ?

{
                   xtype:'button',
                   {
                   xtype:'button',
                   id:'submitBtn',
                   text:'Send',
                   ui:'confirm',
                   padding:5
                   text:'Send',
                   ui:'confirm',
                   padding:5
}

To check if everything is working i checked if the Controller class is getting called; Here’s the code;

MyController.js

Ext.define('app.controller.MyController', {
           extend: 'Ext.app.Controller',

       config: {
       refs : {
       submitBtn: '#submitBtn'
       },

       controls : {
       submitBtn: {
       onTap: 'submitData'
       }
       },
       },

       submitData: function() {
       var form = Ext.getCmp('form-id');
       alert("Came here!");

       var formvalues = form.getValues();

       // Web Service code goes here ..
       Ext.Ajax.request({
                        params: formvalues,                     
                        url:'http://mywebservice.com/web_ser'

                        success : function() {
                        Ext.Msg.alert('Success');
                        }

       }
       });

But, the alert was not displayed. I think the controller class was not called.

In the app.js class i have added the controller as shown below;

views: ['Main','Home', 'Contact'],
    controller:['MyController'],

Help ?

Answer 1

In MyController.js,

Change

1. controls: to control: and
2. onTap : to tap :

& it should work now.

How does the code know that it should go execute the Controller class
?

Check out the documentation of controller for neat & complete explanation