ComponentQuery for a parent with ExtJS4?

Question

Is there a way to query "up"? I'm in a Component and want to register listeners to it's parents events with control(). This requires a Query which gets me the parent of my main view.

Answer 1

In ExtJS4, you can use 'up()' from an Ext Element.

The params are a string of the parent element you wish to find e.g:

var parentEl = Ext.get('childID').up('div.parentClass'); 

If you provide some details about the structure of your components/elements I can give a specific example which should fit.

EDIT: To show going 'up' from a component

var myComponent = // however you've got it

var theParentEl = myComponent.getEl().up('div.parentClass');

Answer 2

Usually up('PARENTCLASS') is enough for what you're trying to do. Here is what I do all over the code so elements generates event for the form they are in:

items: [
...
   { xtype: 'checkbox', listeners: {
      change: function() { this.up('window').fireEvent('checkboxchanged'); }
   }}
...
]

Answer 3

As I understand, you want to listen to events dispatched by a component's parent from the child component's controller control function specifically.

There is not a query selector like 'parent < component' which you can put in the child controller's control function to listen to parent events.

Normally I would just add the parent view to the child's controller, then you could listen to it's events. But I assume you are not doing this because you are trying to delegate to different controllers or something.

You could fire an event in the child component whenever that parent event occurs. Inside the parent controller you could do it like this:

var child = parent.down('child');
child.fireEvent('myOwnEventName', arg1, arg2, arg3, etc);

Then you would add a handler for 'myOwnEventName' in the child controller's control function to run the logic you wanted for it.

If the parent doesn't have a controller then you should just add the parent component as a view in the child's controller.

Answer 4

The Sencha help says "Member expressions from candidate Components may be tested. If the expression returns a truthy value, the candidate Component will be included in the query:" in the http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery help.

Took me a while to realize I can do the following in my controller:

this.control({
  'window{down("testcomp")}[down]': { beforedestroy: this.doNotCloseIfUnsaved }
});

Using the {} operation, we can call any arbitrary code. Really bad from an efficiency standpoint, but it got the job done. I had to add the [down] because it runs component queries from right to left, so we have to be sure down() exists before we try running it (on every component). Thus, I was able to attach an event to whatever window holds my component.

Of course, other functions can be used too, like child() instead of down() if you want to ensure it is the immediate child rather than just anywhere below.