View Full Version : Getting the outter panel of an element

2 Dec 2011, 5:25 PM

Let's say I've built a panel with multiple complex line items. The whole built was dynamic and I didn't keep a track of their creation, but it's still there with the UI of course.
Let's there is a button in those complex lines that is supposed to delete the line itself (and all its child components). So, on the click, I have access on this, for the button, but how do I get the whole panel in which I put my elements? That's on that panel that I want to apply the remove method...

Is that clear? ^^

I've tried getRegion() and getBox(), but it's not that.
I could add a CSS class for the panel corresponding to the whole line and use a up() then to get that panel, but I wonder if there is not an Ext JS method to get the parent in which developers put there elements...

2 Dec 2011, 7:55 PM
Not sure what you mean by 'line'.

To go from a button to a surrounding panel you'd usually use a component query.


It'd be something like:

var panel = button.up('panel');

Note that this is not a CSS query, as mentioned in your question.

If you can't accurately identify the target panel using its xtype then you may need to add an arbitrary marker property to the panel just for query purposes.

There are various alternatives to using a component query. Capturing the parent panel in the closure of the button handler is one.

2 Dec 2011, 8:43 PM
Ok, great. I didn't know I could use a xtype with query. It's not what's written in the API doc (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-query).
Thanks, it helps a lot. :)

3 Dec 2011, 9:29 AM
I didn't know I could use a xtype with query. It's not what's written in the API doc (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-query).

There are 2 different query mechanisms. The query methods on Element are for querying the DOM and use CSS selectors. These cannot use xtype. The docs you referenced are correct in that regard.

The other query mechanism is component query. The query syntax is quite similar but it is distinct. You cannot query for DOM nodes using a component query.