PDA

View Full Version : Ext JS w/ jQuery not working. Why?


parsifal
13 Jun 2007, 11:42 AM
Hi all,

Here's my page (below). When I view it in IE, it shows what's supposed to be a message box, but is actually just two pieces of text and a button, off the screen to the bottom. Why doesn't this work? What can I do to get it working? This is remarkably simple and I don't understand why it doesn't work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>

<script src="Javascript/ExtJS/adapter/jquery/jquery.js" type="text/javascript"></script>
<script src="Javascript/ExtJS/adapter/jquery/jquery-plugins.js" type="text/javascript"></script>
<script src="Javascript/ExtJS/adapter/jquery/ext-jquery-adapter.js"></script>
<script src="Javascript/ExtJS/ext-all.js" type="text/javascript"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.show({
title: "hi!",
msg: "Whuddup?",
buttons: Ext.MessageBox.OK});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p id="hi">this is a test</p>
</div>
</form>
</body>
</html>
parsifal
20 Jun 2007, 8:50 AM
Okay, I just wrote this from scratch, just a bare HTML file with all the stuff included. Someone please try this (view in IE 6 or Firefox 2, it doesn't matter!), and tell me why it doesn't work, even though this is exactly what the Ext JS INCLUDE_ORDER.txt file says to do?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Testing ExtJS w/ jQuery</title>

<script src="ext-1.0.1/adapter/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="ext-1.0.1/adapter/jquery/jquery-plugins.js" type="text/javascript" charset="utf-8"></script>
<script src="ext-1.0.1/adapter/jquery/ext-jquery-adapter.js" type="text/javascript" charset="utf-8"></script>
<script src="ext-1.0.1/ext-all.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
Ext.onReady(function() {
var div = Ext.get("TestDiv");

div.center();

Ext.MessageBox.show({
title: "whud zup?",
msg: "hi!",
width: 400,
buttons: Ext.MessageBox.OK
})
})
</script>
</head>
<body>
<div id="TestDiv" style="position: relative; width: 150px; height: 25px; border: 1px solid black; background-color: #eef;">
<span>hi!</span>
</div>
</body>
</html>
majorpay
20 Jun 2007, 8:59 AM
where is your base library include?

<script type="text/javascript" src="extjs11/adapter/ext/ext-base.js"></script>
tryanDLS
20 Jun 2007, 9:08 AM
You don't need ext-base to use jquery. That being said, you could test your page with ext-base and ext-all.js instead of jquery to see if it works. Also, I don't see ext-all.css included.
majorpay
20 Jun 2007, 9:15 AM
You don't need ext-base to use jquery. That being said, you could test your page with ext-base and ext-all.js instead of jquery to see if it works. Also, I don't see ext-all.css included.

I may be way off here (because I'm a noob), but doesn't the MessageBox require the base libraries?



Ext.MessageBox.show({
title: "whud zup?",
msg: "hi!",
width: 400,
buttons: Ext.MessageBox.OK
})
tryanDLS
20 Jun 2007, 9:27 AM
ext-base is the standalone equivalent to using the specific adapter includes. See the include_order.txt file for the 4 combinations
parsifal
20 Jun 2007, 12:14 PM
You don't need ext-base to use jquery. That being said, you could test your page with ext-base and ext-all.js instead of jquery to see if it works. Also, I don't see ext-all.css included.

That was the problem for getting the MessageBox widget to look proper. THANK YOU!!!

I don't recall seeing anything that mentioned that a CSS file is required. INCLUDE_ORDER.txt should be amended to include it, and the file should perhaps be renamed HOW_TO_INCLUDE.txt or INSTALL.txt or something.