Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!

Loiane Groner, Brazilian, works as a Java Developer/IT Specialist/Systems Analyst at IBM Brazil on an international account. She has 4+ years of experience in developing JEE applications. She is the ESJUG (Espirito Santo Java Users Group) and CampinasJUG (Campinas Java Users Group) leader and coordinator. Loiane is passionate about technology and programming. Loiane is a DZone MVB and is not an employee of DZone and has posted 35 posts at DZone. You can read more from them at their website. View Full User Profile

How to use ExtJS 4 + JQuery together

08.12.2011
Email
Views: 8965
  • submit to reddit

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

Tags:
Published at DZone with permission of Loiane Groner, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Nabeel Manara replied on Fri, 2012/01/27 - 12:53pm

Hi. This is nice, very useful… But I have a little patition :P

Can you help this extjs 4 world with an example/minitutorial of how to put together a WYSIWYG Html/Markdown Editor with ExtJS4??

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.