Ext.JS JavaScript Framework a cross-browser JavaScript library for building rich internet applications. It is built for developing high performance, customizable 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 from here
Step 2:
Include the following css and js as
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></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">
$(document).ready(function() {
// do stuff when DOM is ready
});
</script>
//in extJS
<script type="text/javascript">
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 refer extJs API docs
hope it helps you guys 
Anuj Aneja
Intelligrape Software
