Combination of Ext and JQuery
Posted on: December 27, 2007
- In: ajax | cakephp | Developer | ExtJS | jquery | PHP | Programming | Web Development
- 14 Comments
Yesterday, I just tried to learn how to use JQuery with Ext in case of need for future sideline projects. It is not that easy at first however, because, to understand the integration better, you still have to understand how ExtJS runs and how to start coding ExtJS for your projects.
To start, you include the JQuery script.
Then, include your own ExtJS scripts.
To combine JQuery with ExtJS, you have to use ExtJS’ JQuery adapter plugins.
<script src=”/ext-1.1.1/adapter/jquery/ext-jquery-adapter.js”></script>
ExtJS has some needed CSS and images resources that should be called with.
<link href=”/ext-1.1.1/resources/css/xtheme-gray.css” type=”text/css” />
(I just copied this code from the tutorial.)Put this code somewhere on the page:
$(‘#wheelink’).bind(‘click’,function() {
Ext.Msg.alert(‘Whee alert!’, ‘Thanks for clicking me, WHEE!’);
});
});
And your HTML link:
I don’t know yet how the outcome of the code should look like but, mine looks like this:
If you want to try it yourself to learn it, you can go to the JQuery Tutorials first to see what are the basically needed files. And if you still don’t have ExtJS package, you can download it here.
More: It seems to me that more and more web apps are using ExtJS. I came to this
website and it really looks cool!
14 Responses to "Combination of Ext and JQuery"
January 18, 2008 at 4:57 am
hydra12,
thank you for your time visiting my site!
I did include the extjs css file, as I stated it from above, or
did I miss something else?
February 28, 2008 at 12:02 am
try this … just did this today …
Untitled Document
$(document).ready(function(){
$(‘#wheelink’).bind(‘click’,function() {
Ext.Msg.alert(‘Whee alert!’, ‘Thanks for clicking me, WHEE!’);
});
});
February 28, 2008 at 12:04 am
my code got stripped …
remove the gray theme script … that’s to load the custom theme which is probably missing
April 5, 2008 at 3:34 am
@Domini,
thank you very much for visiting my site!
But I think that, at least, the adapters were there for integration purposes in case of developers who would want to use other 3rd party js tools with ExtJS.
And it was a very educational experience for me.
December 21, 2008 at 11:46 am
when using jQuery 1.2.6 and ext 2.2 I tried to run this example and got ‘Ext’ is undefined error in IE7. my js includes are as followed:
ext-all.css
xtheme-gray.css
query-1.2.6.js
ext-all.js (2.2)
ext-base.js (tried with and without this, no effect)
ext-jquery-adapter.js
is there something missing?
March 27, 2010 at 5:10 am
You must add – rel=”stylesheet” – into link tag. And check out your quotes – ” – it’s incorrect.
July 15, 2010 at 3:34 am
Thanks! This was helping me a lot, but please note, that we must first load the adapter/jQuery/*.js file, and then the ext-all.js
June 7, 2013 at 2:59 pm
“Combination of Ext and JQuery | FilChi Weblog” genuinely got
me personally simply addicted with ur web page! Idefinitely will wind up
being returning far more normally. Thanks ,
Alexandria
January 15, 2008 at 2:38 pm
Very interesting. Looking at your screen shot above, it looks like you haven’t included the extjs css files. They are in your ext folder, in /resources/css/. I normally use ext-all.css, but you can also pick and choose based on what you are doing.