PDA

View Full Version : Newbie question about iteration



iassac_beauvoir
17 Dec 2010, 7:53 AM
This is a complete newbie question. I'm having some issues with iterating through dom elements.


Ext.each(elements, function (element, index) {
var subelement = element.query('.foobar');
});
I get the following error - element.query is not a function.

Am I correct in saying that it is the function is passed not the object?

VinylFox
17 Dec 2010, 8:06 AM
Where is the 'elements' array coming from?

I'm guessing that 'element' is not actually an Ext.Element, therefore does not have a query method.

If 'element' is actually an Ext.Component then you will need to call the getEl() method to get it's associated Ext.Element.

iassac_beauvoir
17 Dec 2010, 8:44 AM
Thanks for your response. Let me give you some more background on what I am trying to do.

Select an array of elements on a page based on a css class. As I iterate through each element of the returned array try find a subset of elements based on a css class and then once iterate through this new array to create a new array of elements based on a css class.

What i didn't outline above was that I started of using -



Ext.select('.aElements').each(function(el){
findElements(this.query('.bElements'));
});

var findElements = function (elements, offset) {
Ext.each(elements, function (element, index) {
//inside here I need to find sub elements (within this element only) that have a class of .dElements
}); });I hope that make some sense !

VinylFox
17 Dec 2010, 9:03 AM
There are a couple of goofy things going on in that code, but I think you can simplify this to:


var myEls = Ext.select('.aElements > .bElements > .cElements');

Or something along those lines. That will return a CompositeElement, so take a look at the documentation on how to work with a CompositeElement.

Chaining could also be used I think:

var myEls = Ext.select('.aElements').query('.bElements').query('.dElements');

Now the goofyness...This first section, where you select '.aElements':

Ext.select('.aElements').each(function(el){
findElements(this.query('.bElements'));
});
Why 'this.query' ? What is 'this' scoped to at that point? I think you meant 'el.query'.

Also note that 'select' returns a CompositeElement, whereas 'query' returns an Array.

iassac_beauvoir
17 Dec 2010, 10:37 AM
I tried chaining earlier - but the getCount() always returns 3 - which corresponds to the number of .aElements on the page regardless of the number of sub elements that are present.

var myEls = Ext.select('.aElements').query('.bElements').query('.dElements');
myEls.getCount();

I can't find any examples of this anywhere for EXTJS.

VinylFox
17 Dec 2010, 10:55 AM
How about the first example I provided?


var myEls = Ext.select('.aElements > .bElements > .cElements');

and what about your usage of 'this' ?

iassac_beauvoir
17 Dec 2010, 12:44 PM
Thanks again for your responses.



var myEls = Ext.select('.aElements > .bElements > .cElements');


The above code returns a single array of all elements matching the above criteria. What I need is multiple arrays detailing the amount of cElements in each bElements.

iassac_beauvoir
17 Dec 2010, 12:56 PM
OK - I think i have figured it out -


var myEls = Ext.select('.aElements').each(function(el){
var myEls2 = el.select('.bElements').each(function(el){
var myEls3 = el.select('.cElements')
alert(myEls3.getCount());
});
});

Obviously I'm only using the count to see what is being found. This method seems to return the multiple arrays that I need but I am not sure how efficient it is?

Merci bien

VinylFox
17 Dec 2010, 1:47 PM
Would be more efficient if you added a tag type before the class name, ie:


Ext.select('div.aElements')
el.select('div.bElements')