title: Ext JS 4: Getters and setters in view
body: <p>I've been thinking about this problem for a while, and I can't seem to come up with a reasonable solution. What I would like to do is create getters/setters for a textfield/its value in my view. I realize that the preferred Ext JS way is using a reference within the controller and getting it that way, but that doesn't feel very object-oriented to me. I'd also have to wrap these getters and setters because I want to output a message if the getter returns undefined. What I'd like to do is create my own getters/setters or somehow override the default getters/setters. Here are some ways I was thinking of accomplishing this.</p>
  
  <p>I was thinking I could use the <code>config {}</code>, but that appears to only work for variables I want to define. I then was thinking of using an id somehow, but the community seems split on whether that's a good practice or not. Which leads to my current solution... wrapping. Here's my code:</p>
  
  <blockquote>
    <p><strong>LoginWindow</strong></p>
  </blockquote>
  
  <pre><code>Ext.define('MyApp.view.LoginWindow', {
      extend: 'Ext.window.Window',
      alias: 'widget.loginWindow',
      autoShow: true,
      closable: false,
      border: 0,
      plain: true,
      allowBlank: false,
      title: "Enter your username",
      modal: true,
      config: {
          buttons: [{
              text: "Ok"
          }],
          items: [{
              xtype: 'textfield',
              fieldLabel: 'Username',
              id: 'loginUserInput',
              name: 'loginUserInput',
              msgTarget: 'under',
              validator: function(value) {
                  if (Ext.isEmpty(value)) {
                      return "You need to enter a username.";
                  }
                  return true;
              }
          }]
      },
  
      constructor: function(config) {
          this.callParent(config);
      },
  
      getButton: function() {
          console.log('here');
      }
  });
  </code></pre>
  
  <blockquote>
    <p><strong>MyController</strong></p>
  </blockquote>
  
  <pre><code>Ext.define('MyApp.controller.Chat', {
      extend: 'Ext.app.Controller',
  
      requires: [
          'Views.ChatModule.view.LoginWindow'
      ],
  
      refs: [{
          ref: 'loginWindow',
          selector: 'loginWindow',
          xtype: 'loginWindow',
          autoCreate: true
      }, {
          ref: 'loginUserInput',
          selector: '#loginUserInput'
      }],
  
      init: function() {
          // The events controller oversees
          this.control({
              'loginWindow button[text="Ok"]': {
                  'click': this.onSubmitLoginWindow
              }
          });
      },
  
      getLoginUserInputValue: function() {
          var loginUserInput = this.getLoginUserInput();
          if (loginUserInput) {
              var username = loginUserInput.getValue();
              if (username) {
                  console.log(username);
              } else {
                  console.warn("username is undefined");
              }
          }
          console.warn("loginUserInput is undefined");
      },
  
      onSubmitLoginWindow: function(button, event, eOpts) {
          this.getLoginUserInputValue();
      }
  });
  </code></pre>
  
  <p>This works, and I realize it's a very nit-picky thing, but it just doesn't feel right to have the getter in the controller. I feel like it'd be more object-oriented if it was in the Window. However, if I put it in the Window, I believe my only option is to lean on ids or manually create the textfield in the Window's initComponent--which would involve saving off a reference of the textfield in there, but that seems a bit inefficient... as I would have to make a call to doLayout as well.</p>
  
  <p>Just to reiterate, I'd love to have the getters/setters in the Window, and I'm looking for a quick way to reference it, similar to how the controller references objects. I believe the main answer will be to use ids and making a call to <code>Ext.ComponentQuery.query('#loginUserInput')</code> in the Window, but I'd like to know if there were any better approaches out there... like overriding the auto generated getters/setters or adding a simple getter/setter for an input's value.</p>
  
  <p>Cross-post from the <a href="http://www.sencha.com/forum/showthread.php?272394-Getters-and-setters-inside-view." rel="nofollow noreferrer">Sencha forums</a>.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I guess I was a bit unclear with what I want.  As a more general statement, instead of jamming all things related to my view in the controller, I'd like to store it all in the view itself, which includes things like getters/setters.  One of these getters/setters just so happens to be the loginUserInput getter.</p>
  
  <p>Using a model is an interesting idea, but I feel like that would be a whole lot of overhead for singleton values.  I'm basically looking for something like Java's <a href="https://stackoverflow.com/questions/2036970/tutorial-on-getters-and-setters">setters/getters</a> in the LoginWindow view... and hopefully something as simple as (or close to) Java's.</p>
  
  <p>The idea of including (encapsulating) it in the view makes the controller a bit cleaner, and if I delete the view, I'm deleting its functions as well, so I don't have to go hunting for the functions in the controller... all I have to worry about is removing the references (which should be minimal).</p>