CODEWITHSUNDEEP
extjsevent-handling
Edward Tanguay
Edward Tanguay

Reputation: 193462

How can I select elements in ExtJS?

I have a ExtJS page that is outputting the following DOM.

I want to select a specific element so that I can respond to a click on it.

However, the following code never selected the elements that are built with the extJS library. JQuery can't seem to select them either.

ExtJS can't even find an element that is defined in the <body> element in the HTML file itself. However, JQuery can indeed select an element defined in the <body> element.

I have been reading this guide which seems to indicate it should be no problem to just use Ext.get() and Ext.select() to get elements, however, as the following code shows, the elements are never selected.

How do I select an element in ExtJS?

var members = Ext.select('x-panel');
for (var i = members.length - 1; i >= 0; i--){
   element = members[i];
   element.on('click', function() { alert('test');})
};

alt text alt text

Upvotes: 4

Views: 11491

Answers (3)

taox
taox

Reputation: 55

bmoeskau is right, you can use Ext.select('.x-panel') which returns a collection of divs with class x-panel.

Note that Ext.get() just returns a single element, so if you want to get multiple matches you should use Ext.select() or Ext.query().

And what's more, Ext.select() returns Ext.CompositeElement, though the document does not list but it supports all the methods of Ext.Element so your example can be simply written as:

Ext.select('.x-panel').on('click', function(){ alert('test') });

Code above will add event handler for click operation to each x-panel.

Upvotes: 2

It Grunt
It Grunt

Reputation: 3378

Use: 

Ext.get(el);

if you need to get the flyweight element, use:

Ext.fly(el);

See the API documentation for the Static Ext object for details

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20431

Try Ext.select('.x-panel') with a period in the selector, which is required for selecting by class name.

Upvotes: 4

Related Questions