How to use ExtJS 4 + JQuery together

Loiane Groner

Aug. 12, 11 · Java Zone · Interview

Like (0)

Save

24.25K Views

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

Topics:

Opinions expressed by DZone contributors are their own.

Comments

How to use ExtJS 4 + JQuery together

download the source code:

Java Partner Resources