Failed to execute 'querySelectorAll' on 'Element' in ExtJS 5

Question

I am trying for using Ext.dom.Query.Select method to find all divs which having class name square and highlightedReactangle.Same method was working with extjs 4 , but after up grading to extjs 5 it start throwing error.

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': 'div:any(div.square|div.highlightedReactangle|div.highlightedReactangleIE|div.pin|div.redCircleCount|div.stampPreviewCls)' is not a valid selector.

The statement I'm using to find related div is,

this.el.select("div:any(div.square|div.highlightedReactangle|div.highlightedReactangleIE|div.pin|div.redCircleCount|div.stampPreviewCls)", true);

what exactely I'm missing ?

Paneling

Answer 1

what exactely I'm missing ?

From version 5, when select is called on Element (versus explicitly using Ext.dom.Query.select), Ext JS uses the native querySelectorAll method which requires valid CSS selectors. As the error message suggests, your selector is not a valid one.

In version 4, Ext JS used Ext.dom.Query.select for processing select calls on Elements. That method is more "liberal" than querySelectorAll. It will work in version 5 as well, so you can just use:

Ext.dom.Query.select(your_selector, this.el.dom)

Isogamete

@Dark, I'm able to select element using selector..Don't have have problem with this.el.select() method...I have problem with using syntax...this.el.select("div.redCircleCount") return four element but how should I collect all element with this pattern this.el.select("div.redCircleCount | div.square") ? – Paneling

I also tried your way...this.el.select("div.redCircleCount") returns 4 element exactly whereas Ext.dom.Query.select("div.redCircleCount",this.el); returns empty array – Paneling

The pattern I'm trying for E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3 – Paneling

@AbhijitMuke the second argument to Ext.dom.Query.select must be this.el.dom not this.el. Big difference! – Isogamete