Using Ext With jQuery

http://docs.jquery.com/Tutorials:Using_Ext_With_jQuery

 

 

Using Ext With jQuery

 

Getting started with the Ext library and jQuery.

Original: http://groups.google.com/group/jquery-en/browse_thread/thread/bb64561ee9fe2e22/a0f090d9f5bffd11
Author: Juha Suni

Similar Tutorials: Ajax, Plugins, Ext

Here's a really quick'n'dirty how-to for others who want to jumpstart Ext with jQuery:

1. Download Ext: (Just click the big blue button for now. There is also a feature that lets you build your own Ext with just the features you need, but we'll ignore that for now).

2. Unzip the package, it contains Ext-wise everything you need.

3. Fire up the page you want to start toying with in your editor of preference.

4. Include the javascript-files in the right order

1. jquery.js
2. other possible jquery-plugins you might want to use
3. the Ext jQuery Plugin script. This is in your ext-directory which you just uncompressed earlier, at ext-1.0.1/adapter/jquery/jquery-plugins.js
4. the Ext jQuery Adapter script. This is in your ext-directory which you just uncompressed earlier, at ext-1.0.1/adapter/jquery/ext-jquery-adapter.js
5. Include the main Ext javascript-file, ext-1.0.1/ext-all.js

5. Include the necessary css-eye-candy. Please note that the Ext css-files reference images inside the ext-folder, so I wouldn't carelessly move them around.

1. The ext base css from: ext-1.0.1/resources/css/ext-all.css
2. Pick a theme, for Dark Vista: ext-1.0.1/resources/css/ytheme-vista.css (there is also ytheme-aero.css and ytheme-gray.css, didn't try em out yet).

6. To test this you can just skip the tutorial and jump right into mixing jQuery with Ext: Add the html:

<a href="#" id="wheelink">Whee Click me Click me!</a>

Add the JS:

$(document).ready(function(){
  $('#wheelink').bind('click',function() {
    Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!');
  });
});

Then read the tutorials while already drooling for the eye candy. After doing the above stuff the tutorials and pretty much everything else should work good: Introduction Tutorial, Beginner Tutorial, Videos and Screencasts.

Look through the Ext API Docs.