Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to use ExtJS 4 + JQuery together

DZone's Guide to

How to use ExtJS 4 + JQuery together

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

This is an example of how to use Ext JS 4 and JQuery in an application together.

To use Ext JS 4 with any JS frameowork is very simple: you need to import the js framework file (in this case JQuery ) and import Ext JS. ANd you are ready to develop with both frameworks!

It is very basic and simple, but I get some emails asking about it once in a while, so I thought it would be nice to share, in case you did not use both in a project together before.

Following is how the sample project structure looks like:

And this is the HTML page:

	
<html>
<head>
    <title>Ext JS 4 + JQuery</title>
 
    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
 
    <script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="ext4/ext-all.js"></script>
</head>
<body>
    <script type="text/javascript">
    Ext.onReady(function() {
        Ext.Msg.alert('Alert',$('#divId').text());
 
    });
    </script>
    <div id="divId" style="padding:20px;">Using Ext JS 4 + JQuery</div>
</body>
</html>
   

And the output will be:

Download the source code:

Github: https://github.com/loiane/extjs4-jquery

Google Code (zip file): https://code.google.com/p/extjs4-jquery/downloads/list

Happy Coding! :)

 

From http://loianegroner.com/2011/08/how-to-use-extjs-4-jquery-together

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}