How to find out the ExtJs component behind a specific element on your html page

The Problem

While creating web pages using the ExtJs framework, we do not directly create the html markup. ExtJs is responsible for creating the markup based on the components we define.

But after everything is rendered and you are looking at a particular element on the page, it’s hard to tell which extjs component has rendered that markup. This becomes more apparent when we are dealing with a complex web application with dozens of components defined in different js files.

If we are looking at the html output and wondering which component needs to be modified to change the look of it, it’s not that easy.

The Solution

Here is an easy way to find that out. Browse to your webpage in Chrome. Then right click on the element in question, and click on “Inspect Element”.

This will open up the Elements tab in the Chrome debugging Tool with that particular element markup highlighted.

Now go to the console tab and type this command: Ext.getCmp($0.id). It will reveal the ExtJs component in the console.

You can expand the object to see all it’s properties and easily identify it. Note that a typical component renders a bunch of html elements. This trick will not work if you are on a child level element. So if this command does not give you any result, click on the parent html element to highlight it on the elements tab. And run this command in the console again. You might have to keep traversing the markup this way a few times as most component render a deeply nested markup.

How it works

$0 is a chrome trick to get the javascript object for a given html element. When you do $0.id, that reveals the id of the element. Now, ExtJs provides a way to select an element by it’s markup id: Ext.getCmp(‘idofelement’);

So running Ext.getCmp($0.id) means select the ext component whose id is the same as the id of the selected html element.

So there you go. Using this trick you no longer have to second guess where your markup is coming from. Hopefully, this will save you a bunch of time like it does for me. Happy debugging!!