Adding a 'Controller' class to my MVC based Sencha Touch project

问题

I have created a MVC SenchaTouch project. I have created a sample application where the user will enter the username and password and send it to the web service.

The username, and password fields are suppose to be in the 'VIEW', and the 'sending it to the web service' functionality should be in the 'CONTROLLER'.

In my program, the sending to the web service part is also there in the 'VIEW', so can someone please help me edit my code, so that i could have the 'send to the web service' functionality in the 'CONTROLLER'

Here's the code

Ext.define('TU.view.Contact',{
           extend:'Ext.form.Panel',
           xtype:'contactform',

           config: {

           title:'Contact',
           iconCls:'user',

           url:'http://somesite.com/contact.php',
           items: [
           {
                   xtype:'fieldset',
                   title:'User Login',

                   items:[
                          {
                          xtype:'textfield',
                          name:'name',
                          label:'Name'
                          },
                          {
                          xtype:'passwordfield',
                          name:'password',
                          label:'Password'
                          }
                          ]
           },
           {
                   xtype:'button',
                   text:'Send',
                   ui:'confirm',
                   padding:5,
                   handler:function(){
                   this.up(contactform).submit();

                   }
           }
           ]



           }




           });

回答1:

Firstly, set the id property for your button.

 xtype:'button',
 id:'submitBtn',
 text:'Send'
 .....
 .....

In the controller class,

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

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

        control : {
            submitBtn: {
                tap: 'submitData'
            }
        },
    },

    submitData: function() {
             var form = Ext.getCmp('form-id');

             // Get username and password fields ...
             var formvalues = form.getValues();

             // Web Service code goes here ..
             Ext.Ajax.request({
                 params: formvalues,                     
                 url:'http://_servername_.com/app/insert.php'

                 success : function() {
                       Ext.Msg.alert('Success','Username and password successfully entered');
                 }

                 failure : function() {
                       Ext.Msg.alert('Failure','Error while adding data');
                 }
             });        
    }
});

NOTE : insert.php will be the server side code ( just an e.g) that will make a connection with your database and enter the values in it.

来源：https://stackoverflow.com/questions/10463835/adding-a-controller-class-to-my-mvc-based-sencha-touch-project