Over a million developers have joined DZone.

How to use ExtJS 4 + JQuery together

DZone's Guide to

How to use ExtJS 4 + JQuery together

· Java Zone ·
Free Resource

FlexNet Code Aware, a free scan tool for developers. Scan Java, NuGet, and NPM packages for open source security and open source license compliance issues.

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

 Scan Java, NuGet, and NPM packages for open source security and license compliance issues. 


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}