Extjs/how-to/javascript/Jquery

Extjs quick start guide for jQuery Developers

Posted on by Anis Ahmad / 43 Comments

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:

<script type="text/javascript">
$(document).ready(function() {
  // do stuff when DOM is ready
});
</script>

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.

<script type="text/javascript">
Ext.onReady(function() {
  // do stuff when DOM is ready
});
</script>

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.

// Selecting by ID in jQuery
var myDiv = $("#element-id");

// Selecting by ID in Extjs
var myDiv = Ext.get('element-id');

// Perform some action on it
// Add a class
myDiv.addClass('my-class');
// Set the width 100 px, 
// true is for applying default animation on change
myDiv.setWidth(100, true);
// Retrive some information of the element
// Get the elements box info as object {x, y, width, height}
var 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:

// Select elements with CSS Selector
var imgs = Ext.select("#my-div div.member img");
// or select directly from an existing element
var members = Ext.get('my-div');
var imgs = members.select('div.member img');

// Now, any Ext.Element actions can be performed on all the elements in this 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.

var el1 = Ext.get("my-1st-div");
var el2 = Ext.get("my-2nd-div");

// Appending elements
el1.appendChild("<p>A new paragraph</p>").appendTo(el2)

// Replcing, removing
var el3 = Ext.get("my-3rd-div");
Ext.get("my-4th-div").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.

// Binding an event in jQuery 
$(".btn").click(function() {
     // Do something on button click
   });

// Binding an event in Extjs
Ext.select('.btn').on('click', function() {
// Do something on button click
   });

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-

// Basic request in jQuery
$.ajax({
   type: "POST",
   url: "myurl.php",
   data: { foo: 'bar' },
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
 
// Basic request in Ext
Ext.Ajax.request({
   url: 'myurl.php',
   params: { foo: 'bar' },
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

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

// Load Ajax response in directly in jQuery
var msgBox = $('#message');
msgBox.load('myurl.php', {name : $('#name').val()} );

// Load Ajax response in directly in Ext
var msgBox = Ext.get('message');
msgBox.load({
    url: 'myurl.php',
    params: 'name=' + Ext.get('name').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.

, , , ,
Anis Ahmad

43 Comments

  5. 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!

    Reply
  7. Pingback: Extjs quick start guide for jQuery Developers « Dailytuts.net - Daily tutorial for the people
  9. Pingback: Ext Core 3.0 ha visto la luz : Blogografia

  10. 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!

    Reply

  20. 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.

    Reply

  21. 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.

    Reply

  26. 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)

    Reply

  29. 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

    Reply

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

    Reply

  31. 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.

    Reply

  40. 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.

    Reply

  41. Really nice article, thanx for sharing. This is exaclty what I’m looking for before start using jQuery after ExtJS.

    Reply

  43. 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

    Reply

Leave a Comment

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