Getting started with extJS

Ext.JS JavaScript Framework a cross-browser JavaScript library for building rich internet applications. It is built for developing high performance, customisable UI widgets and features a well designed, documented and extensible Component model. It is available in both Commercial and Open Source licenses are available.

Step 1: First download the source css and js
Step 2: Include the following css and js as

<script src="../../adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../../ext-all.js" type="text/javascript"></script>

Now start writing the code in script tag or make js file.

jQuery and extJS comparisions:
Document is ready
//document is raedy in jQuery
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
// do stuff when DOM is ready
});
// ]]></script>

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

Selecting elements
// 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();

extJS:
// 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

Dom scripting
var el1 = Ext.get("my-1st-div");
var el2 = Ext.get("my-2nd-div");
// Appending elements
el1.appendChild("A new paragraph").appendTo(el2)
// Replcing, removing
var el3 = Ext.get("my-3rd-div");
Ext.get("my-4th-div").replace(el3).insertAfter(el2);
el2.remove()

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

Ajax
// Basic request in jQuery
$.ajax({
type: "POST",
url: url,
data: { x: 'y },
success: function(msg){
alert( "Data Saved: " + msg );
}
});

// Basic request in Ext
Ext.Ajax.request({
url: url,
params: { x: 'abc' },
success: function(msg){
alert( "Data Saved: " + msg );
}
});

Here, I have listed the basic difference between jQuery and extJS for complete reference