How to use ExtJS 4 + JQuery together

DZone's Guide to

How to use ExtJS 4 + JQuery together

Loiane Groner

Aug. 12, 11 · Java Zone ·

Free Resource

Like (0)

Comment (1)

Save

{{ articles[0].views | formatCount}} Views

Take 60 minutes to understand the Power of the Actor Model with "Designing Reactive Systems: The Role Of Actors In Distributed Architecture". Brought to you in partnership with Lightbend.

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

Learn how the Actor model provides a simple but powerful way to design and implement reactive applications that can distribute work across clusters of cores and servers. Brought to you in partnership with Lightbend.

DOWNLOAD

Topics:

Like (0)

Comment (1)

Save

{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.

How to use ExtJS 4 + JQuery together

How to use ExtJS 4 + JQuery together

Download the source code:

Java Partner Resources

Java Partner Resources

{{ editionName }}

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

{{ parent.tldr }}

{{ parent.linkDescription }}

How to use ExtJS 4 + JQuery together

How to use ExtJS 4 + JQuery together

Download the source code:

Like This Article? Read More From DZone

Java Partner Resources

Java Partner Resources

{{ editionName }}

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

{{ parent.tldr }}

{{ parent.linkDescription }}