Code structure in EXT JS

Question

I started developing an application and I'm not satisfied by the way the code looks. Here are my questions :

• I currently have a few forms on my main page and there is a lot of code nested in, with handlers. For example :

        buttons: [{
              text: 'Submit',
              margin: '0 100 0 0',
              formBind: true,
              handler: function(){
                  this.up('form').getForm().updateRecord();
                  var record = this.up('form').getForm().getRecord();
                  Ext.Ajax.request({
                      url: 'http://localholst/ext/test/login.php',
                      method: 'POST',
                      params: {
                          'username':record.Username,
                          'password':record.Password
                      },
                      success: function(response,options){
                          var info = Ext.JSON.decode(response.responseText);
                          alert(info.status);
                      }
                  });
              }
          }]
  

  This code works fine, but I want to know if there is a way to write it somewhere else. In this case, should I declare the button as a View, or is there a way to do it with a Controller?

• My other question is quite similar, but about this code :

   Ext.application({
    name: 'HelloExt',
    launch: function() {
  

So basically I am a bit lost about how to structure my code and how and when the controllers should be used. I hope all that makes sense.

Thanks in advance for your replies.

Answer 1

You could define action for your button and handle the event in the controller using the control method that allows you to map handlers to components selected with the component query:

// view
Ext.define('Example.user.Edit', {
   extend: 'Ext.window.Window',
   alias: 'widget.useredit',
   buttons: [{
        text: 'Submit',
        margin: '0 100 0 0',
        formBind: true,
        action: 'add'
   }];

// controller:
Ext.define('Example.controller.User', {
   extend: 'Ext.app.Controller',
   init: function () {
      this.control({
       'useredit button[action=add]': {
            click : this.addUser
        }
     });
   } ...

Source:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller-method-control

Answer 2

Well, the question about "how" and "when" controllers (in the sense of Ext JS MVC Controllers) should be used can only be answered by "it depends".

Wiktor pointed out a really common way of integrating views into controllers. I would personally suggest using "listen" instead of "control". In terms of component events, they accomplish the same thing, but listen will give you more extensibility if you want to integrate other event domains (or even create your own).

Others philosophically HATE Ext JS's "MVC" and opt to use something like Deft JS to create intermediate "view" controllers.

And still yet having the handler directly in the view works perfectly fine too. Like you, I don't particularly care for that style, but it works...and working code is fundamentally what matters.

Ultimately, Ext JS gives you a bunch of flexibility to do what you want, so it will simply come down to the style that best fits your coding style, your organization's standards, etc.