extjs using up and down methods
extjs, extjs4
Solution
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.
Problem
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 >__<.