title: extjs using up and down methods
body: <p>I'm trying to use <code>up</code> and <code>down</code> to call rather than <code>Ext.getCmp</code> but I'm not quite understanding it. I have this code</p>
  
  <pre><code>listeners: {
      'change': function(field, selectedValue) {
          // Ext.getCmp('wildAnimal').setValue(selectedValue);
          this.up('form').down('#wildAnimal').setValue(selectedValue);
      }
  }
  </code></pre>
  
  <p>inside this larger code</p>
  
  <pre><code>Ext.define('ryan', {
      constructor: function() {
          Ext.create('Ext.form.Panel', {
              bodyStyle: {"background-color":"green"},
              name: 'mypanel',
              title: 'Animal sanctuary, one animal per location  ',
              width: 300,
              bodyPadding: 10,
              test: 'mycat',
              style: 'background-color: #Fdd;',
              renderTo: Ext.getBody(),
              items: [{
                  itemId: 'button1',
                  xtype: 'button',
                  text: 'click the button',
                  handler: function() {
                      alert('(&lt;^_^&gt;)');
                  }
              },{
                  itemId: 'wildAnimal',
                  xtype: 'textfield',
                  fieldLabel: 'animal:',
                  name: 'myanimal'
              },{
                  itemId: 'myCombo',
                  xtype: 'combo',
                  fieldLabel: 'choose your animal',
                  store: animals,
                  queryMode: 'local',
                  displayField: 'name',
                  listeners: {
                      'change': function(field, selectedValue) {
                          // Ext.getCmp('wildAnimal').setValue(selectedValue);
                          this.up('form').down('#wildAnimal').setValue(selectedValue);
                      }
                  }
              }]
          });
      }
  });
  
  var animals = Ext.create('Ext.data.Store', {
      fields: ['itemId', 'name'],
      data: [{
          "itemId": 'mycat',
          "name": "mycat"
      },{
          "itemId" : 'mydog', 
          "name": "mydog"
      },{
          'itemId' : 'sbBarGirls', 
          "name": "BarGirls-when-drunk"
      }]
  });
  
  Ext.onReady(function() {
      var a = Ext.create('ryan');
      var b = Ext.create('ryan');
  });
  </code></pre>
  
  <p>What I'm confused on is why I need the hashtag in <code>wildAnimal</code> to get this working. Also when I switch <code>Ext.form.Panel</code> to <code>widget.window</code> the listeners code stops working. My code creates a window but I can't pass the value of the combobox like I can when it's a form panel. As I understand it <code>up</code> is used to find stuff from the parent class. When using a <code>widget.window</code> do I call <code>this.up(widget)</code>? I can't get that to work. Also I'm very new to Ext JS so many things may go over my head >__&lt;.</p>