PDA

View Full Version : How does one actually "use" jQuery with ext?



perlmonger
18 Apr 2007, 8:36 AM
I've been using jQuery for a while and looking at ext as well. I decided to take a closer look at ext and specifically how I can use it with the familiar jQuery library. I went through the Introduction to Ext tutorial and found it interesting. The question I now have is, how do I use this with jQuery? I would presume that one would include the ext-jquery-adapter.js file instead of the ext-yui-adapter.js file but, then what? Can one simply use the jquery object ($) instead of Ext? It seems that there isn't any documentation for the adapters and I've been unable to find any examples online. Can someone shed some light on how this is done and what the advantages or disadvantages are of using jQuery over the yui library?

Thanks for any help provided and a big thank you to Jack!

Illiarian
18 Apr 2007, 11:50 PM
From the jQuery mailing list (http://www.nabble.com/forum/ViewPost.jtp?post=10037969&framed=y&skin=15494)

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

1. Download Ext:
http://www.extjs.com/download
(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. Download and setup jQuery with the dimensions plugin
I used jQuery 1.1.2, seems to work well now.
You can find the dimensions plugin from the svn, also available with your
browser from:
http://dev.jquery.com/browser/trunk/plugins/dimensions/dimensions.js?format=txt

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

5. Include the javascript-files in the right order
a) jquery.js
b) dimensions-plugin
c) other possible jquery-plugins you might want to use
d) the Ext jQuery Adapter script. This is in your ext-directory which you
just uncompressed earlier, at ext-1.0\adapter\jquery\ext-jquery-adapter.js
e) Include the main Ext javascript-file, ext-1.0\ext-all.js

6) 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.
a) The ext base css from: ext-1.0/resources/css/ext-all.css
b) Pick a theme, for Dark Vista: ext-1.0\resources\css\ytheme-vista.css
(there is also ytheme-aero.css and ytheme-gray.css, didn't try em out yet).

7) Like all l33ts just skip the tutorials 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!');
});
});

8) 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 bueno:
http://www.extjs.com/tutorial/introduction-ext
http://www.extjs.com/tutorials/beginner/
http://www.extjs.com/tutorials/video

9 Go for the API:
http://extjs.com/deploy/ext/docs/

Hope this prevents others from frustration while trying to get their hands
on all the goodies.

perlmonger
19 Apr 2007, 3:29 AM
Thank you very much Illiarian, this explains much. I'm starting to wonder though, where is the real advantage to this


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

over this?


Ext.onReady(function() {
Ext.get('wheelink').on('click', function() {
Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!');
});
});

Other than using jQuery's more familiar syntax I don't see the advantages. Am I missing something or the jQuery support really just an effort to make Ext more appealing to users of other libraries?

Illiarian
19 Apr 2007, 4:13 AM
No advantage :)

Just personal preferences :)

Unfortunately, you can't pass jQuery objects to Ext constructs that require a HTNLElement...

So, you're left with a subset of things to do with jQuery (like smart selectors and some plugins that won't interfere with Ext...)

perlmonger
19 Apr 2007, 4:24 AM
I'm sure this thread will be a great help to many Ext newcomers. Thanks for the info. I think, at least while learning more about Ext, I'll just use the yui library as described in the tutorials. After I get a little experience with Ext I'll then try to see what advantages I can discover with Ext and my old favorite jQuery. It feels a bit like a betrayal to jQuery but Ext is absolutely unbelievable. I can't wait to experiment with it some more.

Thanks again for all the help.