Extjs quick start guide for jQuery Developers

I’ve seen many people (including myself) trying out the power of jQuery for once and then getting stuck with it. Why not? It’s one of the coolest and smartest JavaScript library out there. However, I have broken out from the circle and found that Extjs is another great mentor in the field of JavaScript libraries. Especially, I think it’s UI components are unbeatable (Dojo can be a nearest candidate).

If you are habituated to think JavaScript coding in the syntax of jQuery, you can start working with ExtJS right now (with a few twist)!  What you need is some little tuning in concept and syntax. Today I will be trying to explain how to do this in 6 important points :

1. Document is ready – How to get the our document ready and where to start.
2. Selecting elements – How to select elements in Ext.
3. Dom scripting – Changing on and in the element.
4. Ext events – Assigning and firing events.
5. Ext Components – The powerful alternate of jQuery UI.
6. Ajax – Making Ajax request in Ext.

Ok, let’s dive in to deep of each of these points.

Document is ready

First of all, you need to download, extract and set up the page for using Ext. Remember to download the API Documentation as well.

Now, here is how we setup jQuery and register a ready event for the document in jQuery:

&lt;script type=<span style="color: #006080">"text/javascript"</span>&gt;
$(document).ready(<span style="color: #0000ff">function</span>() {
  <span style="color: #008000">// do stuff when DOM is ready</span>
});
&lt;/script&gt;

To do the same thing in Ext, you have to include default ext css, an adapter and the Ext itself. See the difference at the point of $(document).ready(). When the DOM is ready, Ext fires the Ext.onReady() event.

&lt;script type=<span style="color: #006080">"text/javascript"</span>&gt;
Ext.onReady(<span style="color: #0000ff">function</span>() {
  <span style="color: #008000">// do stuff when DOM is ready</span>
});
&lt;/script&gt;

Selecting elements

To take any action, you have to select the element first. In jQuery, simply $(‘css-selector’) does everything. It works for a single element by ID, some elements by tag name/class or any complex selection with virtual selectors. But in Extjs, two different methods are used for selecting a single element by ID and other combined multiple element.

Selecting by id in Extjs is done by Ext.get() method. Here is an example of selecting an element and performing some action on it.

<span style="color: #008000">// Selecting by ID in jQuery</span>
<span style="color: #0000ff">var</span> myDiv = $(<span style="color: #006080">"#element-id"</span>);

<span style="color: #008000">// Selecting by ID in Extjs</span>
<span style="color: #0000ff">var</span> myDiv = Ext.get(<span style="color: #006080">'element-id'</span>);

<span style="color: #008000">// Perform some action on it</span>
<span style="color: #008000">// Add a class</span>
myDiv.addClass(<span style="color: #006080">'my-class'</span>);
<span style="color: #008000">// Set the width 100 px, </span>
<span style="color: #008000">// true is for applying default animation on change</span>
myDiv.setWidth(100, <span style="color: #0000ff">true</span>);
<span style="color: #008000">// Retrive some information of the element</span>
<span style="color: #008000">// Get the elements box info as object {x, y, width, height}</span>
<span style="color: #0000ff">var</span> box = myDiv.getBox();

See the Ext.Element class in API Doc to know what more actions you can perform on an element.

On other hand, Ext.select() method is used to select other CSS selection. Here is an example:

<span style="color: #008000">// Select elements with CSS Selector</span>
<span style="color: #0000ff">var</span> imgs = Ext.select(<span style="color: #006080">"#my-div div.member img"</span>);
<span style="color: #008000">// or select directly from an existing element</span>
<span style="color: #0000ff">var</span> members = Ext.get(<span style="color: #006080">'my-div'</span>);
<span style="color: #0000ff">var</span> imgs = members.select(<span style="color: #006080">'div.member img'</span>);

// Now, any Ext.Element actions can be performed on all the elements <span style="color: #0000ff">in</span> <span style="color: #0000ff">this</span> collection

Please note these points about selected Ext elements:

• Ext.get() returns Ext.Element object and Ext.select() returns Ext.CompositeElement object.
• All Ext.Element actions can be performed on Ext.CompositeElement object
• The actions performed on DOM nodes can be chained.
• Ext.select() uses the powerful DomQuery class for selecting. See this class for using virtual selectors and more.

Dom scripting

Like jQuery, ext has easy methods for perform insertion, deletion,  moving, copying etc on selected element(s). Ext.Element class has functions for performing common tasks.

<span style="color: #0000ff">var</span> el1 = Ext.get(<span style="color: #006080">"my-1st-div"</span>);
<span style="color: #0000ff">var</span> el2 = Ext.get(<span style="color: #006080">"my-2nd-div"</span>);

<span style="color: #008000">// Appending elements</span>
el1.appendChild(<span style="color: #006080">"&lt;p&gt;A new paragraph&lt;/p&gt;"</span>).appendTo(el2)

<span style="color: #008000">// Replcing, removing</span>
<span style="color: #0000ff">var</span> el3 = Ext.get(<span style="color: #006080">"my-3rd-div"</span>);
Ext.get(<span style="color: #006080">"my-4th-div"</span>).replace(el3).insertAfter(el2);

el2.remove()

See the Ext.Element class for more functions like these. To extending the power of DOM scripting,  see the Ext.DomHelper class.

Ext events

First the easiest example. See how we do in jQuery and how to do in Ext.

<span style="color: #008000">// Binding an event in jQuery </span>
$(<span style="color: #006080">".btn"</span>).click(<span style="color: #0000ff">function</span>() {
     <span style="color: #008000">// Do something on button click</span>
   });

<span style="color: #008000">// Binding an event in Extjs</span>
Ext.select(<span style="color: #006080">'.btn'</span>).on(<span style="color: #006080">'click'</span>, <span style="color: #0000ff">function</span>() {
<span style="color: #008000">// Do something on button click</span>
   });

So, instate of binding with functions with event name, we will bind with Element.on() function of Ext.Element class. The 1st parameter of Element.on() is the event name and the 2nd is a function name or an anonymous function.

See the Ext.EventManager and  Ext.EventObject classes for complex event handling.

Ext Components

Ext has dozens of extensive UI Components. All they are extended from Ext.Component class. There are BoxComponent, Button, ColorPalette, DataView, DatePicker, Editor, ProgressBar, Slider, TabPanel, Tree, many kinds of Grids, Toolbars, Menus, Form components and much more. Each of this components needs separate tutorials to learn. So, I am not going to describe it in this little scope. See this page for component specific tutorials.

http://extjs.com/learn/Tutorials

Ajax

Ajax requests are handled in Ext.Ajax class. Sending basic Ajax request in Extjs is very similar to jQuery-

<span style="color: #008000">// Basic request in jQuery</span>
$.ajax({
   type: <span style="color: #006080">"POST"</span>,
   url: <span style="color: #006080">"myurl.php"</span>,
   data: { foo: <span style="color: #006080">'bar'</span> },
   success: <span style="color: #0000ff">function</span>(msg){
     alert( <span style="color: #006080">"Data Saved: "</span> + msg );
   }
 });

<span style="color: #008000">// Basic request in Ext</span>
Ext.Ajax.request({
   url: <span style="color: #006080">'myurl.php'</span>,
   <span style="color: #0000ff">params</span>: { foo: <span style="color: #006080">'bar'</span> },
   success: <span style="color: #0000ff">function</span>(msg){
     alert( <span style="color: #006080">"Data Saved: "</span> + msg );
   }
});

Like the jQuery load function, here is also similar function exist in Ext.Element to insert Ajax response directly into DOM.

<span style="color: #008000">// Load Ajax response in directly in jQuery</span>
<span style="color: #0000ff">var</span> msgBox = $(<span style="color: #006080">'#message'</span>);
msgBox.load(<span style="color: #006080">'myurl.php'</span>, {name : $(<span style="color: #006080">'#name'</span>).val()} );

<span style="color: #008000">// Load Ajax response in directly in Ext</span>
<span style="color: #0000ff">var</span> msgBox = Ext.get(<span style="color: #006080">'message'</span>);
msgBox.load({
    url: <span style="color: #006080">'myurl.php'</span>,
    <span style="color: #0000ff">params</span>: <span style="color: #006080">'name='</span> + Ext.get(<span style="color: #006080">'name'</span>).dom.value,
});

See the Ext.Ajax class for more featured Ajax functions of Extjs.

Before ending, here is a surprise for you. Though you cannot leave jQuery for a moment, you are not going to miss the power of Ext. These tutorials describe how to use Ext with jQuery –

http://docs.jquery.com/Tutorials:Using_Ext_With_jQuery.

http://filchiprogrammer.wordpress.com/2007/12/27/combination-of-ext-and-jquery/

http://blog.jquery.com/2007/02/19/jquery-and-jack-slocums-ext/

See you soon.