FilChi Weblog

Combination of Ext and JQuery

Posted on: December 27, 2007


Yesterday, I just tried to learn how to use JQuery with Ext in case of need for future sideline projects. It is not that easy at first however, because, to understand the integration better, you still have to understand how ExtJS runs and how to start coding ExtJS for your projects.

To start, you include the JQuery script.

<script src=”jquery-1.2.1.js”> </script>

Then, include your own ExtJS scripts.

<script src=”/ext-1.1.1/ext-all.js”></script>

To combine JQuery with ExtJS, you have to use ExtJS’ JQuery adapter plugins.

<script src=”/ext-1.1.1/adapter/jquery/jquery-plugins.js”></script>
<script src=”/ext-1.1.1/adapter/jquery/ext-jquery-adapter.js”></script>

ExtJS has some needed CSS and images resources that should be called with.

<link href=”/ext-1.1.1/resources/css/ext-all.css” type=”text/css” />
<link href=”/ext-1.1.1/resources/css/xtheme-gray.css” type=”text/css” />

(I just copied this code from the tutorial.)Put this code somewhere on the page:

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

And your HTML link:

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

I don’t know yet how the outcome of the code should look like but, mine looks like this:

whee_alert.jpg

If you want to try it yourself to learn it, you can go to the JQuery Tutorials first to see what are the basically needed files. And if you still don’t have ExtJS package, you can download it here.

More: It seems to me that more and more web apps are using ExtJS. I came to this
website
and it really looks cool!

Advertisements

14 Responses to "Combination of Ext and JQuery"

Very interesting. Looking at your screen shot above, it looks like you haven’t included the extjs css files. They are in your ext folder, in /resources/css/. I normally use ext-all.css, but you can also pick and choose based on what you are doing.

hydra12,

thank you for your time visiting my site!

I did include the extjs css file, as I stated it from above, or
did I miss something else?

try this … just did this today …

Untitled Document

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

Whee Click me Click me!

my code got stripped …

remove the gray theme script … that’s to load the custom theme which is probably missing

I didn’t need to use ExtJS’ JQuery adapter plugins.

@Domini,

thank you very much for visiting my site!

But I think that, at least, the adapters were there for integration purposes in case of developers who would want to use other 3rd party js tools with ExtJS.

And it was a very educational experience for me.

when using jQuery 1.2.6 and ext 2.2 I tried to run this example and got ‘Ext’ is undefined error in IE7. my js includes are as followed:

ext-all.css
xtheme-gray.css
query-1.2.6.js
ext-all.js (2.2)
ext-base.js (tried with and without this, no effect)
ext-jquery-adapter.js

is there something missing?

sorry, my mistake, the order is adapter first…

Sorry

You must add – rel=”stylesheet” – into link tag. And check out your quotes – ” – it’s incorrect.

The quotes was done by wordpress.

Thanks! This was helping me a lot, but please note, that we must first load the adapter/jQuery/*.js file, and then the ext-all.js

“Combination of Ext and JQuery | FilChi Weblog” genuinely got
me personally simply addicted with ur web page! Idefinitely will wind up
being returning far more normally. Thanks ,
Alexandria

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: