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.

Answer 2

The symantics of up and down methods follow the ComponentQuery class. Highly recommend you read the API docs on this. And also see below for getting started with ExtJS.

Good luck!

---

I am just going to leave this here for you.

This is a getting started list of resources that I put together for my colleagues: Obviously links are to ExtJS4.1 but feel free to grab the same for the latest version.

API : http://docs.sencha.com/ext-js/4-1/

Examples : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

Guides : http://docs.sencha.com/ext-js/4-1/#!/guide

Resources:

Sencha Forum : http://www.sencha.com/forum/

StackOverflow : https://stackoverflow.com/questions/tagged/extjs

Tools:

Firebug Plugin (Illuminations for Developers)

http://www.illuminations-for-developers.com/

How To Get Started

1. Scroll through the Examples to get ideas of what you want to build.
2. Read through these Guides :
    ○ Getting Started
    ○ Class System
    ○ MVC
    ○ Layouts
    ○ Components
    ○ Data Package

Once you are familiar with these concepts decide which components you will use and take a deeper look at the specific guides under the Components section. I would also advise reading through the App Architecture tutorials.