ColdFusion - ExtJS and jQuery syntax comparison

In a previous post I talked about how there isn't much of a difference between ExtJS Core and jQuery, and today I am going to go through some of the syntax used for doing some DOM work in both.

Before I go and discuss this I would like to also point out one thing, only because I am not sure people are actually aware that ExtJS Core is a completely separate package to ExtJS. As with jQuery it is also very free to use in your applications.

One of the best things in both of these frameworks is the ability to search the DOM, make changes to it to how and what suits your requirements. I grabbed an example of the jQuery website for selecting the last matched element, and will give an example of the same thing in ExtJS.

<!DOCTYPE html>
<html>
   <head>
      <InvalidTag src="http://code.jquery.com/jquery-latest.min.js"></script>
   </head>
   <body>
      <table>
         <tr><td>First Row</td></tr>
         <tr><td>Middle Row</td></tr>
         <tr><td>Last Row</td></tr>
      </table>
      <InvalidTag>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>
   </body>
</html>

As you can see in jQuery it is very straight forward, we are asking for the last table row and changing its color to yellow and making it bolder.

In ExtJS this is almost identical and is done like this.

<!DOCTYPE html>
<html>
   <head>
      <InvalidTag src="ext-core.js"></script>
   </head>
   <body>
      <table>
         <tr><td>First Row</td></tr>
         <tr><td>Middle Row</td></tr>
         <tr><td>Last Row</td></tr>
      </table>
      <InvalidTag>
         Ext.select('tr:last').setStyle({backgroundColor: 'yellow', fontWeight: 'bolder'});
      </script>
   </body>
</html>

As you can see this is identical in the way the both of them work, the only difference is the method calls.



  • Paul Kukiel's Gravatar Great post although it seams lots of your code syntax is not being output correctly.  May I suggest a similar approach to what I am now using to display code within my blog.  It's much neater and you will no longer have the grey background which is a little hard to read through.

    http://blog.kukiel.net/2010/08/easy-way-to-embed-c...
    # Posted By Paul Kukiel | 8/26/10 12:12 AM
  • John Farrar's Gravatar Perhaps then someone could learn jQuery, search the web for blog posts like this and learn to use the simplicity of EXTJS via diverse resources. :) 

    Is there any basic docs on EXT JS like there is on jQuery core?
    # Posted By John Farrar | 8/26/10 8:53 AM
  • # Posted By Andrew Scott | 8/26/10 4:52 PM