PDA

View Full Version : Adding handler to DOM element without using Id?



leew
27 Apr 2010, 4:18 AM
Hi. I have an Ext.Panel componet with some HTML inside it set using the HTML config option. In the 'afterrender' handler I'd like to add an event handler to a DOM element within the Panel. I have got this working by giving the DOM element an Id and then using "Ext.get('elementId').on('click',function....." to add the handler but that way only works if there is a single instance of my object because IDs have to be unique. So does anyone know anyway of doing this without using Ids and will work with multiple instances?

Thanks.

Animal
27 Apr 2010, 4:37 AM
This is what DomQuery and CompositeElement is for.

leew
27 Apr 2010, 5:25 AM
ok, I've been looking at the DomQuery class but I cannot figure out how to set a panel as the root or how to access the HTML from the panel. Could you enlighten me?

Animal
27 Apr 2010, 5:26 AM
Panel.getEl()

What does it return? What are the methods of that?

leew
27 Apr 2010, 5:36 AM
Tried getEl and dumped it to the console using console.dir and I get a whole pile of properties and methods (too many to list) but according to the API and looking at the element dumped in the console, it returns the container element rather than the stuff in the content area of the panel (as specified by the HTML config option which is what I want to search).

sumit.madan
27 Apr 2010, 6:27 AM
ExtJS automatically assigns ids if you don't specify one. To select a HTML element inside a panel, your selector string should start with the panel id. After that use the standard selector syntax for reaching the HTML DOM node.

Eg. to select the first anchor under the panel:

Ext.DomQuery.selectNode('#' + Panel.id + ' a')

Animal
27 Apr 2010, 6:37 AM
Tried getEl and dumped it to the console using console.dir and I get a whole pile of properties and methods (too many to list) but according to the API and looking at the element dumped in the console, it returns the container element rather than the stuff in the content area of the panel (as specified by the HTML config option which is what I want to search).

Yes, the element. And what does the API doc of Element give you?