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

Secure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.

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

Secure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.

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.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.linkDescription }}