extjs using up and down methods

Question

I'm trying to use up and down to call rather than Ext.getCmp but I'm not quite understanding it. I have this code

listeners: {
    'change': function(field, selectedValue) {
        // Ext.getCmp('wildAnimal').setValue(selectedValue);
        this.up('form').down('#wildAnimal').setValue(selectedValue);
    }
}

inside this larger 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('(<^_^>)');
                }
            },{
                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');
});

What I'm confused on is why I need the hashtag in wildAnimal to get this working. Also when I switch Ext.form.Panel to widget.window 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 up is used to find stuff from the parent class. When using a widget.window do I call this.up(widget)? I can't get that to work. Also I'm very new to Ext JS so many things may go over my head >__<.

Answer 1

The up and down methods are used to traverse the component tree.

When using up and down with selectors, the default selector checks the xtype of the component. So up('form') means "keep going up the component tree until you find a form." The #wildAnimal selector means "keep going up until you find the component where id == 'wildAnimal'". If you use up() with no selectors, it returns the parent container.

If you decide to use Ext.window.Window instead of Ext.form.Panel you would need to change all occurrences of up('form') with up('window'). Otherwise, if you know that "myCombo" and "wildAnimal" are sibling components you can just use up().down('#wildAnimal') and it will work after changing the type of parent container.