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

Get the Edge with a Professional Java IDE. 30-day free trial.

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: