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, 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

Step 2:
Include the following css and js as

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

Now start writing the code in script tag or make js file.
jQuery and extJS comparisions:

Document is ready

[html]
//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>
[/html]

Selecting elements

[html]
// 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
[/html]

Dom scripting

[html]
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()
[/html]

Events

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

Ajax

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

Here, I have listed the basic difference between jQuery and extJS for complete reference
hope it helps you guys 🙂