Over a million developers have joined DZone.

How to use ExtJS 4 + JQuery together

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}