Tracing DOM element id back to its ExtJs component

Question

We are develpoing a web-based automation solution for a web application that is built using ExtJs.

Currently i am testing various different object identification techniques that identify web elements in the best way.

We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).

Is this possible to do through code or through some other technique?

Answer 1

I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.

You can target Ext components via several ways:

1. Ext.ComponentQuery.query(CQselector) method (see docs for examples)
2. Ext.getCmp(componentID) if you know component ID
3. up() and down() methods from any container/component. these also take CQselector expressions

Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.

Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.

Answer 2

I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!

Answer 3

Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.

You could then use

comp.itemId 

To retrieve the itemId

You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.

You can also use the Sencha Page Analyzer to see the entire component tree