How to use ExtJS 4 + JQuery together
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
(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
Can you help this extjs 4 world with an example/minitutorial of how to put together a WYSIWYG Html/Markdown Editor with ExtJS4??