jQuery geliştiricilerine ExtJs'ye geçiş için başlangıç klavuzu

I've seen many people (including myself) trying out the power of jQuery for once and then getting stuck with it. Why not? It's one of the coolest and smartest JavaScript library out there. However, I have broken out from the circle and found that Extjs is another great mentor in the field of JavaScript libraries. Especially, I think it's UI components are unbeatable (Dojo can be a nearest candidate).
If you are habituated to think JavaScript coding in the syntax of jQuery, you can start working with ExtJS right now (with a few twist)!  What you need is some little tuning in concept and syntax. Today I will be trying to explain how to do this in 6 important points :

1. Document is ready – How to get the our 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.
6. Ajax – Making Ajax request in Ext.

Ok, let's dive in to deep of each of these points.

Document is ready

First of all, you need to download, extract and set up the page for using Ext. Remember to download the API Documentation as well.
Now, here is how we setup jQuery and register a ready event for the document in jQuery:

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

To do the same thing in Ext, you have to include default ext css, an adapter and the Ext itself. See the difference at the point of $(document).ready(). When the DOM is ready, Ext fires the Ext.onReady() event.

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

Selecting elements

To take any action, you have to select the element first. 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. But in Extjs, two different methods are used for selecting a single element by ID and other combined multiple element.
Selecting by id in Extjs is done by Ext.get() method. Here is an example of selecting an element and performing some action on it.

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

See the Ext.Element class in API Doc to know what more actions you can perform on an element.
On other hand, Ext.select() method is used to select other CSS selection. Here is an example:

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

Please note these points about selected Ext elements:

• Ext.get() returns Ext.Element object and Ext.select() returns Ext.CompositeElement object.
• All Ext.Element actions can be performed on Ext.CompositeElement object
• The actions performed on DOM nodes can be chained.
• Ext.select() uses the powerful DomQuery class for selecting. See this class for using virtual selectors and more.

Dom scripting

Like jQuery, ext has easy methods for perform insertion, deletion,  moving, copying etc on selected element(s). Ext.Element class has functions for performing common tasks.

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

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

See the Ext.Element class for more functions like these. To extending the power of DOM scripting,  see the Ext.DomHelper class.

Ext events

First the easiest example. See how we do in jQuery and how to do in Ext.

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

So, instate of binding with functions with event name, we will bind with Element.on() function of Ext.Element class. The 1st parameter of Element.on() is the event name and the 2nd is a function name or an anonymous function.
See the Ext.EventManager and  Ext.EventObject classes for complex event handling.

Ext Components

Ext has dozens of extensive UI Components. All they 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. Each of this components needs separate tutorials to learn. So, I am not going to describe it in this little scope. See this page for component specific tutorials.
http://extjs.com/learn/Tutorials

Ajax

Ajax requests are handled in Ext.Ajax class. Sending basic Ajax request in Extjs is very similar to jQuery-

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

Like the jQuery load function, here is also similar function exist in Ext.Element to insert Ajax response directly into DOM.

// Load Ajax response in directly in jQuery
var msgBox = $('#message');
msgBox.load('myurl.php', {name : $('#name').val()} );

// Load Ajax response in directly in Ext
var msgBox = Ext.get('message');
msgBox.load({
url: 'myurl.php',
params: 'name=' + Ext.get('name').dom.value,
});

See the Ext.Ajax class for more featured Ajax functions of Extjs.
Before ending, here is a surprise for you. Though you cannot leave jQuery for a moment, you are not going to miss the power of Ext. These tutorials describe how to use Ext with jQuery -
http://docs.jquery.com/Tutorials:Using_Ext_With_jQuery.
http://filchiprogrammer.wordpress.com/2007/12/27/combination-of-ext-and-jquery/
http://blog.jquery.com/2007/02/19/jquery-and-jack-slocums-ext/
See you soon.
Kaynak:
http://www.ajaxray.com/blog/2009/04/05/extjs-quick-start-guide-for-jquery-developers-javascript-howto/