ExtJs - Get element by div class?

Question

How do I get the ExtJs component object of a Div by class name?

Say my div is:

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

How do I get the ExtJs object of this Div to perform e.g. getWidth()

Note: There is no id given.

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 an Ext.Element. You can then use ext methods on el like so

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

or

el.getWidth()

Answer 2

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

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

demo

Answer 3

For Ext4 and up you could use the following:

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

And you will get and array of this components

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

Answer 4

Ext.select('abc');

This method works in EXT 4 also.

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