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.

43 Comments

  1. Thanks Anis for putting such an easy to read article. I’ve been thinking a lot about Ext but was not sure how would the transformation work – but now I can guess it won’t be too hard 🙂

    Cheers!

  2. awesome post anis, very very informative. i was looking forward to such a comparative post cause i got an immense interest on Ext core. i was planning to start it for quite a long because of it’s awesome GUI components.

    keep up the good work. very useful!

  3. Anis bhai.
    I am loving it. I am a newbie to learn ExtJS and this is a great article for us.
    india like
    December 16, 2009 at 1:53 pm

    Very nice and useful tutorials to web designers,
    Thanks for posting.

  4. Hi,

    it is a very nice tutorial but there is a huge difference between jQuery and ExtJS. Let me tell you a nice funny qoute about jQuery. jQuery is written for people that don’t know javascript by people who doesn’t know javascript. It is partially true cause jQuery is a strong tool if the javascript is not your first language and you want to add a little ajax functionality in your web page. But if you want to build the entire interface and functionality with javascript, i recommend ExtJS. A short comparison of jQuery and plus points of ExtJS; nice data binding and event features, crossbrowser and flawless ui design, strong and clear documentation.
    min points of ExtJS: huge library, difficult ui customization, too many dom element creation
    plus points of jQuery: strong selector, lightweight library, easy plugin development and of course huge selection of 3rd party plugins.
    minus points of jQuery: you need to write too much CSS and HTML and depencies between the plugins. very poor documentation about the plugins.

  5. Hi there,

    I’m actually stunned that nobody spotted this:

    el1.appendChild(“A new paragraph”).appendTo(el2)

    should in fact read

    el1.createChild(“A new paragraph”).appendTo(el2)

  6. Good of you to introduce things.

    Here’s a related detail.

    ExtJS works with “Ext Core” – an Open Source, stand-alone JS framework. It also works with other popular JS frameworks (YUI, jQuery, Prototype, etc), using so-called adapters.

    For all the “adapters” that work with ExtJS, Ext.Ajax.request should return a transactionId (an integer).

    Currently, this does not work with the jQuery adapter.

    So, it’s not possible to use the jQuery adapter and ExtJS and abort a long-running request, for instance.

    (jQuery.ajax() does return an XHR object with which one could implement this kind of feature.)

    You can track progress on this issue here:

    http://www.extjs.com/forum/showthread.php?95408-OPEN-795-Ext.Ajax.request-Not-Returning-Transaction-Number&highlight=ajax+transactionId

  7. Is it possible to use jQuery with ExtJS? I like jQuery in DOM manipulation, but ExtJS is much better than jQueryUI, I think.

  8. Maybe there is a learning curve. But, the core library is as light as JQuery now, and the look and feel is so beautiful, and once you pass the initial curve, it is very fast development time. It has everything one possibly needs. It is so much worth learning it.

  9. Hi,

    It is very good tutorial and easy to understand.
    I have one question.
    In my application we have 8 images in one component.
    Now I want to get the image id which got selected by the client.

    I don’t want to write code for each image using Ext.get(imgid).on(‘click’, function().

    can you please give me the best solution using Extjs.

  10. Very nice article. A quick question. What is itemId in Ext JS for, and how can we search an element by the itemId using Ext.get methods

Leave a Comment

Your email address will not be published. Required fields are marked *