How to use ExtJS 4 + JQuery together

DZone 's Guide to

How to use ExtJS 4 + JQuery together

· Java Zone ·
Free Resource

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:

    <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>
    <script type="text/javascript">
    Ext.onReady(function() {
    <div id="divId" style="padding:20px;">Using Ext JS 4 + JQuery</div>

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


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}