Extended JavaScript (ExtJS) Quick Start Guide for JQuery Developers

In My previous Blog "ExtJS", we had a brief Introduction of ExtJS ,Comparing ExtJS with JQuery , popularity of ExtJS etc.

In this Blog we will see "ExtJS(Extended JavaScript) Quick Start Guide for JQuery Developers".

For working with ExtJS it needs two js files.
   1. ext-base.js - This provide core functionality of Ext.It is basic machinery of EXT.
   2. ext-all.js - All of the widgets live in this files.This is primary ext library file.

If we want to use JQuery plugin with ExtJS  then we need following files.
   1. jquery.js
   2. jquery-plugins.js // required JQuery plugins
   3. ext-jquery-adapter.js
   4. ext-all.js

The below mentioned points demonstrate how to transition from JQuery to ExtJS:
   1. Document is ready – How to get the 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.

ExtJS has so many extensive UI Components. All components 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.

   6. Ajax – Making Ajax request in Ext.

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

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

JQuery – A Ready event is used  to register Jquery.
ExtJS - In ExtJS, When the DOM is ready, Ext fires the Ext.onReady() event.

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

// Selecting by ID in ExtJS
var myDiv = Ext.get('element-id');
// Select elements with CSS Selector
var imgs = Ext.select("#my-div div.member img");
// Selecting by ID in ExtJS
var myDiv = Ext.get('element-id');
// Select elements with CSS Selector
var imgs = Ext.select("#my-div div.member img");
// 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);

To take any action, we have to select the element first.
JQuery - 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.
ExtJS - In ExtJS, two different methods are used.
              1. Ext.get() method is used to select any single element of document by id.
              2. Ext.select() method is used to select other combined multiple CSS selection.

// Appending elements
$("p").append("<b>Hello</b>");


// Replcing, removing

$("<b>Para</b>").replaceAll("p"); 
$("p").replaceWith("<b>Para.</b>");
<div class="hello">Hello</div>
$('.hello').remove();

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

// Appending elements
el1.appendChild("<p>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()

Like JQuery, ExtJS has easy methods to perform insertion, deletion, moving, copying etc on selected element(s).
Ext.Element class has functions to perform all common tasks.

// 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
});

JQuery – Element.click() is used to bind an event in Jquery.
ExtJS – Element.on(p1, p2) function of Ext.Element class is used to bind an event.
                Where p1 = event name and p2 = function name or an anonymous function.

// 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 );
 }
});

JQuery – Ajax requests are handled in JQuery using Ajax class.
ExtJS - Ajax requests are handled in ExtJS using Ext.Ajax class. Sending basic Ajax request in ExtJS is very similar to JQuery.