title: How do I make a button add a day to a datefield
body: <p>I'm having trouble figuring out how to do this the 'right' way - or at least make it work, and I am by no means an expert on either js or Extjs.</p>
  
  <h2>Goal</h2>
  
  <p>Create a panel with a datepicker, and simple controls to go to the given date or go to the previous/next day made in Extjs 4. It is to be a part of a php application for displaying a given days schedule in an html table. The only thing this question concerns is how to create the datepicker properly in Extjs.</p>
  
  <p>I've taken a screenshot of the Extjs part of my application to give an idea of the usage:
  <a href="http://i.imgur.com/IoZ9f.png" rel="nofollow">http://i.imgur.com/IoZ9f.png</a></p>
  
  <h2>Problem</h2>
  
  <p>I think I've made the basic structure of the code, but I'm having trouble getting the prev and next buttons to add or substract a day from the <code>datefield</code>. 
  I've made two functions,<code>prevDate()</code> and <code>nextDate()</code>, within the datefield item to show what I want to achieve, but I'm pretty sure thats not how to do it.</p>
  
  <p>How would I go about that? If I'm supposed to do it with my own functions, where do I add them and how do I add them? </p>
  
  <p>I've got a refference to the <code>datefield</code> inside the handler for the <code>prev</code> and <code>next</code> buttons, but I'd rather not do it this way - any suggestion on how to design this better? </p>
  
  <p>Since this is some of my first experience with Extjs 4, I'd also like to do it the 'right' way, or at least not make something too crude. </p>
  
  <h2>Code</h2>
  
  <pre><code>var datePanel = Ext.create('Ext.panel.Panel', {
      layout: {
          type: 'hbox'
      },
      renderTo: 'date-controls',
      width: 258,
      height: 43,
      bodyPadding: 10,
      items: [{
          xtype: 'datefield',
          anchor: '60%',
          name: 'datepicker',
          id: 'extDatepicker',
          cls: 'datepicker',
          value: new Date(),
          handler: function(picker, date) {
              picker.value = date; 
          },
  
          /*These two functions doesn't work because they don't actually 
            have a reference to the picker - Is it event the correct way 
            to add functions to the datefield?*/
          nextDate: function(picker, date) {
              picker.value = Ext.Date.add(picker.value, Ext.Date.DAY, 1);
          },
          prevDate: function(picker, date) {
              picker.value = Ext.Date.add(picker.value, Ext.Date.DAY, -1);
          }
      },{
          xtype: 'button',
          name: 'go',
          text: 'GO',
          scope: this, 
          cls: 'ext-button-go',
          handler: function() {
              //TODO
          }
      },{
          xtype: 'button',
          name: 'prev',
          text: '&lt;',
          cls: 'ext-button',
          handler: function() {
  
                      /*This looks crude and wrong, 
                        I would much rather pass a reference or something*/
              var datefield = datePanel.items.getAt(0);
              console.log(datefield);
              datefield.prevDate();
          }
      },{
          xtype: 'button',
          name: 'next',
          text: '&gt;',
          cls: 'ext-button',
          handler: function() {
              var datefield = datePanel.items.getAt(0);
              console.log(datefield);
              datefield.nextDate();
          }
      }]
  });
  </code></pre>
  
  <p>I'm currently doing the <a href="http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture" rel="nofollow">MVC tutorial from Sencha</a> in my spare time, but I'm having a hard time translating what I'm doing there to something of this small scale. It seems to be too complex for what I'm trying to achieve here, no? 
  Feel free to point out better ways to go about this.</p>
  
  <p>Any input is very much appreciated.</p>
  
  <hr>
  
  <p>Edit:
  I'd totally forgotten about the <code>datefield.setValue(Date)</code> function, and now I'm able to go to the previous or next date by setting the <code>handler</code> of the <code>prev</code> and <code>next</code> buttons like this:</p>
  
  <pre><code>xtype: 'button',
  name: 'prev',
  text: '&lt;',
  cls: 'ext-button',
  handler: function() {
      var datefield = datePanel.items.getAt(0);
      datefield.setValue(Ext.Date.add(datefield.value, Ext.Date.DAY, -1));
  }
  </code></pre>
  
  <p>I'm still unsure if this is the right way to do this. It feels kind of 'dirty'</p>