ExtJs - Get an element by div class?

Question

How do I get a component of an ExtJs component named Div by class?

Say my div:

<div class="abc"></div> 

How do I get the ExtJs object of this div to execute, for example. getWidth()

Note. No id .

What I tried:

 Ext.select(".abc") Ext.query(".abc") 

---

Edit:

Error: Object has no method 'getWidth'

 <div id="main"> <div class="abc"></div> </div> 

  var d = Ext.get( "main" ); d.query('.abc').getWidth(); 

Answer 1

Use

 var dom = Ext.dom.Query.select('.abc'); var el = Ext.get(dom[0]); 

This will return Ext.Element . Then you can use ext methods on el, like

 el.on('click', function(){}, scope); 

or

 el.getWidth() 

Answer 2

I believe you mean Ext.dom.Element (not the component component of ExtJs). If yes, try this code

 var d = Ext.get( "main" ); alert(d.down('.abc').getWidth());​ 

demo

Answer 3

For Ext4 and above, you can use the following:

 Ext.ComponentQuery.query('panel[cls=myCls]'); 

And you get an array of these components

source: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery

Answer 4

 Ext.select('abc'); 

This method also works in EXT 4.

In your example, just remove the dot when calling the class name string.