Combination of Ext and JQuery

December 27, 2007 · Filed under Developer, ExtJS, PHP, Programming, Web Development, ajax, cakephp, jquery · Tagged , , , , , ,

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!

6 Responses so far »

  1. 1

    hydra12 said,

    January 15, 2008 @ 2:38 pm

    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.

  2. 2

    phpcurious said,

    January 18, 2008 @ 4:57 am

    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?

  3. 3

    greg said,

    February 28, 2008 @ 12:02 am

    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!

  4. 4

    greg said,

    February 28, 2008 @ 12:04 am

    my code got stripped …

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

  5. 5

    Dómini García said,

    April 4, 2008 @ 4:51 pm

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

  6. 6

    phpcurious said,

    April 5, 2008 @ 3:34 am

    @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.

Comment RSS · TrackBack URI

Say your words