API

Element

The Element really is the heart of Ext as most of what you’ll do involves getting access to Elements and performing actions on them.

get

The code to get an Ext Element by ID looks like this:

Ext.onReady(function() {
  var myDiv = Ext.get('myDiv');
});

Static method to retrieve Element objects. Shorthand of Ext.Element.get.

select

Selecting DOM Nodes

Often it is either impractical or impossible to select DOM nodes by ID. Maybe the ID is not set, or you don’t know it, or there are too many elements to practically reference directly by ID. Sometimes you may want to select nodes based on something other than ID, like an attribute or a CSS classname. For these reasons, Ext ships with an extremely powerful DOM selector library called DomQuery.

DomQuery can be used as a standalone library, but more often when using Ext, you’ll use it in the context of selecting Elements so that you can then act on them via the Element interface. Luckily, the Element object itself supports querying via the Element.select method, which internally uses DomQuery to select elements. As a simple example of how you might use this, if you wanted to easily select every paragraph and perform an action on all of them at once, you could do something like this:

// Highlights every paragraph
Ext.select('p').highlight();

This example demonstrates a very handy aspect of Element.select, it returns a CompositeElement, which provides access to every underlying Element via the Element interface. This allows you to easily act on every Element instance returned by Element.select without looping and touching each one individually.

Events

Anonymous function

Ext.onReady(function() {
  Ext.get('myButton').on('click', function(){
    alert("You clicked the button");
  });
});

Ext.onReady(function() {
  Ext.select('p').on('click', function() {
    alert("You clicked a paragraph");
  });
});

Named function

Ext.onReady(function() {
  var paragraphClicked = function() {
    alert("You clicked a paragraph");
  }
  Ext.select('p').on('click', paragraphClicked);
});

The Element.on method passes 3 parameters to the event handling function. The first parameter is the event that occurred. This is actually an Ext event object, which is both normalized across browsers and provides more information than the standard browser event. For example, the event’s target DOM node can be retrieved with this simple addition:

Ext.onReady(function() {
  var paragraphClicked = function(e) {
    Ext.get(e.target).highlight();
  }
  Ext.select('p').on('click', paragraphClicked);
});

Note that target is a DOM node, so we first retrieve the corresponding Element, then perform whatever action we want on it.

UpdateManager

UpdateManager