PDA

View Full Version : DOM search



SeaSharp
27 Nov 2007, 3:48 AM
I need to manipulate DOM element class names for the first time since starting to use Ext and I am looking for guidance on how to achieve the following without hardcoding loads of onMouseOver script functions inline in the DOM. Starting with a onMouseOver event on a DIV element that was created via an Ext.Template, I need to iterate over 8 child elements of that DIV searching for 5 elements. Each of those 5 elements will have a known distinct ID and classname.

Having obtained a list of those 5 elements, I want to iterate over the list and change each element’s class name from “xxxx” to “xxxxHover”.

I think I should use Ext.DomQuery for the above but don't understand the query syntax. Could someone post example code please?

evant
27 Nov 2007, 4:27 AM
DomQuery works with css style selectors, so for example:



Ext.select('div.foo') //select all divs with a classname foo


Ext.select returns a CompositeElement, which is basically a group of Ext.Element. This allows you to do:



Ext.select('div.foo').on('click', bar);


Of course, DomQuery supports much more powerful selectors (attribute selectors) and pseudo selectors which you can find in the docs.

SeaSharp
29 Nov 2007, 8:29 AM
Some progress following your help, but I have another dom query question.

The following code was the solution to my previous question about scanning downwards in the dom element hierarchy. From the node "el" this query scans children and builds a result array containing any element with a class name starting with the prefix "lrb". Later I realized that the result array contains simple HTMLElement objects and not Ext.Element objects.


var result = Ext.DomQuery.select( "*[class^=lrb]", el );
Ok now I have another requirement to search upwards through the node.parent chain until I find an element whose id starts with the text prefix "abc". I tried the following but it triggers a runtime exception.


var parentEl = someChildEl.findParent( "#^abc", 15, true );

hendricd
29 Nov 2007, 10:30 AM
You'll need to review the DOMQuery docs further.



var result = Ext.DomQuery.select( "*[class^=lrb]", true, el ); //starting at el