PDA

View Full Version : firefox error message w/ combo/auto-complete


nbailey
22 Mar 2007, 3:59 PM
We have a series of combo-boxes, all of which load and work fine in IE7. However, when we look at the page in firefox, we get a JS error that reads 'this.el has no properties', which is being thrown in ext-all.js on line 172.

Any ideas? Thanks in advance
tryanDLS
22 Mar 2007, 6:14 PM
Can you try it with ext-all-debug and see if you can get a better idea where it's occurring?
nbailey
22 Mar 2007, 6:43 PM
No, I will do that now and post whatever I find. Thanks for the tip.
nbailey
22 Mar 2007, 6:47 PM
Is there a call I need to make to get the debugger to fire? I have called ext-all-debug instead of ext-all, but when I load the page it doesn't seem to do anything different..
JeffHowden
22 Mar 2007, 8:31 PM
The error should show up in firebug if it's enabled.
nbailey
22 Mar 2007, 8:50 PM
firebug is enabled - I posted the error in the initial post, 'This.el has no properties'. When I comment out the combo box call, the code runs fine.

I have managed to narrow it down to this: when the Ext.onReady code is called in firefox, the form fields are not available. However, in IE7, its fine. If I simply alert(document.getElementById('someFieldName')), in IE7 I get the expected 'Object object', but in Firefox, I am getting 'NULL'.

Its freaking killing me....
JeffHowden
22 Mar 2007, 9:26 PM
I think we'll need to see a larger portion of the code or a link to a page that does what you describe in order to troubleshoot.
dnixon
30 Mar 2007, 3:36 PM
firebug:

this.el has no properties
getId()ext-all-debug.js (line 21396)
hasPanel(Object closable=false loaded=false active=false title=North)ext-all-debug.js (line 20204)
add(Object closable=false loaded=false active=false title=North)ext-all-debug.js (line 20612)
add("north", Object closable=false loaded=false active=false title=North)ext-all-debug.js (line 19954)
init()web_courier.js (line 50)
fire()ext-all-debug.js (line 1382)
fireDocReady()ext-all-debug.js (line 1411)
[Break on this error] return this.el.id;

ext-all-debug.js (line 21396)

I'm running alpha 3 rev 4/ FF 2.0.0.3/Win XP Pro

I pretty much copied the partial BorderLayout example from Cross Browser Layouts 1 (can't seem to link to that page directly). Maybe the combination of jQuery and YUI and Ext is a problem?
I tried removing my bit adding an image to the north panel but it made no difference.

web_courier.js:

WebCourier = function () {
var layout;
return {
init: function () {
layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
},
center: {
titlebar: true,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});

// shorthand
var CP = Ext.ContentPanel;

layout.beginUpdate();
var northPanel = new CP("north", "North");
northPanel.innerHTML='images/header2.jpg';
layout.add("north", northPanel);
layout.add("south", new CP("south", {title: "South", closable: true}));
layout.add("west", new CP("west", {title: "West"}));
layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
layout.add("center", new CP("received", {title: "Received", closable: true}));
layout.add("center", new CP("inbox", {title: "Inbox", closable: false}));
layout.add("center", new CP("outbox", {title: "Outbox", closable: false}));
layout.add("center", new CP("shipped", {title: "Shipped", closable: false}));
layout.add("center", new CP("trash", {title: "Trash", closable: false}));
layout.getRegion("center").showPanel("received");
layout.endUpdate();
}
};
};

var wc = new WebCourier();
Ext.onReady(wc.init, wc);


html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="lib/resources/css/reset-min.css" />
<link rel="stylesheet" id="theme" href="lib/resources/css/ytheme-vista.css" />
<link rel="stylesheet" type="text/css" href="web_courier.css" />
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="lib/yui-utilities.js"></script>
<script type="text/javascript" src="lib/ext-yui-adapter.js"></script>
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<script type="text/javascript" src="web_courier.js"></script>
</head>
<body>
</body>
</html>
JeffHowden
30 Mar 2007, 4:21 PM
Any particular reason you're including both jQuery and YUI and their adapters?
dnixon
30 Mar 2007, 4:35 PM
I understand that yui-utilities.js is required for Ext and I liked the look of the jQuery chaining stuff and also the jQuery $.ajax stuff. Is including both a problem? I have not come across where the exact allowable combinations are spelled out yet (sorry only 1.5 days into this so far - Dojo refugee).

I tried removing jquery.js and the adapter but it makes no difference.

Dave Nixon
dnixon
30 Mar 2007, 4:40 PM
One other thing, I'm just loading the files directly from my local filesystem - not using a web server yet.
Is that a problem for XHR requests?
Dave N
tryanDLS
30 Mar 2007, 6:14 PM
1. The jQuery stuff is still very new and nowhere near as tested as the yui code. I would say that while you're trying to learn Ext there's no point in making your life more difficult by combining them and fighting possible conflicts.

2) You can run samples locally without a webserver, as long as they're not trying to make requests via the HttpProxy class or trying to read a local file.
dnixon
31 Mar 2007, 9:01 AM
Sounds like good advice - thanks!
However this error is not caused by using both jQuery and YUI since I removed the jQuery and jQuery adapter script tags and still see the error. Is there something wrong with the way I instantiate WebCourier and call the init method? I run my js through jslint religiously. Maybe I have some
incompatible Ext code in my directory tree as I had upgraded from the earlier release.
I will try removing everything and unzipping a fresh copy of the YUI and Ext code.

Dave
tryanDLS
31 Mar 2007, 9:26 AM
I also don't see ext-all.css in your includes - this should be before any included theme file. Also, northPanel.innerHTML isn't valid. It's a ContentPanel, not a DOM object. You probably want to do

northPanel.setContent(....)
dnixon
2 Apr 2007, 11:38 AM
I figured out my problem - need to have <div>s in the html corresponding to these panels.
Generally this error "this.el has no properties" happens when you have failed to define such a div or you have a spelling discrepancy in the id between the html and the js.

so in html:


<div id="west" class="x-layout-inactive-content"></div>



and in js:


layout.add("west", new CP("west", {title: "West"}));



embarrassingly obvious in retrospect.

Dave