PDA

View Full Version : Tree renders in FF 3.6 but not in IE8...



ewomack
24 Mar 2011, 8:53 AM
The code below works PERFECTLY in FF. I nearly gasped when it rendered for the first time. A transcendent moment, to be sure. Unfortunately, the tree only renders a single "Client" leaf (with "file" icon instead of "folder" icon for the root node) in IE8. Unfortunately, it matters more that this works in IE than FF for my purposes. I'm also using EXT 3.3.2.

I'm receiving no error messages of any kind in IE. I started up the IE debugger (development tools) and it presented no prompts, issues, or anything. I'm guessing it has something to do with the root node, but I haven't been able to narrow anything down yet.

For context, I'm developing with C# ASP.NET MVC 3 in VS2010. I added the Json output of my controller below the code. This Json validated fine with at least 2 online validators.

Has anyone seen this? Any ideas? I looked for dangling commas, but haven't seen any yet. Thank you!

Tree Code:



var treeloader = new Ext.tree.TreeLoader({
dataUrl: '/GUIStuff/TreeLoad'
});

var rootnode = new Ext.tree.AsyncTreeNode({
text:'Clients',
expanded: true
});

var tree = new Ext.tree.TreePanel({
region: 'west',
title: 'Clients',
id: 'theTree',
animate: true,
enableDD: false,
loader:treeloader,
lines: true,
width: 200,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false,
root: rootnode
});

tree.addListener('click', function (node, event) {
var otherPlace = Ext.getCmp('theViewport').findById('cenPanel');
otherPlace.load({ url: 'Engage/' + node.attributes.text });
});

var myButton = new Ext.Button({
text: 'oh boy oh boy',
handler: function () {
alert("THE BUTTON!!!");
}
});

var viewport = new Ext.Viewport({
renderTo: 'port',
id: 'theViewport',
layout: 'border',
items: [
{
region: 'center',
xtype: 'panel',
id: 'cenPanel',
title: 'Center!',
items: myButton
},
{
region: 'north',
xtype: 'panel',
height: 50,
title: 'Great North'
},
tree
]
});
Json output from MVC controller:



[{"text":"BeeBop","id":1,"leaf":"true","cls":"file"},{"text":"BopBee","id":2,"leaf":"true","cls":"file"},{"text":"Ancillus","id":3,"leaf":"true","cls":"file"},{"text":"Formosus","id":4,"leaf":"true","cls":"file"},{"text":"Randankle","id":5,"leaf":"true","cls":"file"},{"text":"Vorption","id":6,"leaf":"true","cls":"file"},{"text":"Zequonquonk","id":7,"leaf":"true","cls":"file"},{"text":"Farrrf","id":8,"leaf":"true","cls":"file"},{"text":"Ardillo","id":9,"leaf":"true","cls":"file"},{"text":"Meson","id":10,"leaf":"true","cls":"file"},{"text":"BeeBoopADoo","id":11,"leaf":"true","cls":"file"},{"text":"WhooEeeAWapp","id":12,"leaf":"true","cls":"file"},{"text":"ZipAHooHaaay","id":13,"leaf":"true","cls":"file"},{"text":"FFFeeeeetttt","id":14,"leaf":"true","cls":"file"},{"text":"Yaaghaheee","id":15,"leaf":"true","cls":"file"},{"text":"Undulating","id":16,"leaf":"true","cls":"file"},{"text":"Gorgepaaaquo","id":17,"leaf":"true","cls":"file"}]

fay
24 Mar 2011, 9:09 AM
The JSON's fine. I think there must be another part of your code (not displayed here) that is causing the problem. I just copied your code and put it in a test file and it worked grand. I replaced your dataUrl with a local php that returns your JSON:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var treeloader = new Ext.tree.TreeLoader({
dataUrl: 'getjson.php'
});

var rootnode = new Ext.tree.AsyncTreeNode({
text:'Clients',
expanded: true
});

var tree = new Ext.tree.TreePanel({
region: 'west',
title: 'Clients',
id: 'theTree',
animate: true,
enableDD: false,
loader:treeloader,
lines: true,
width: 200,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false,
root: rootnode
});

tree.addListener('click', function (node, event) {
var otherPlace = Ext.getCmp('theViewport').findById('cenPanel');
otherPlace.load({ url: 'Engage/' + node.attributes.text });
});

var myButton = new Ext.Button({
text: 'oh boy oh boy',
handler: function () {
alert("THE BUTTON!!!");
}
});

var viewport = new Ext.Viewport({
renderTo: 'port',
id: 'theViewport',
layout: 'border',
items: [
{
region: 'center',
xtype: 'panel',
id: 'cenPanel',
title: 'Center!',
items: myButton
},
{
region: 'north',
xtype: 'panel',
height: 50,
title: 'Great North'
},
tree
]
});
});
</script>
</head>

<body>
<div id="port"></div>
</body>

</html>


Run all your through www.jslint.com (http://www.jslint.com) and remove ALL warnings/errors.

EDIT: Btw, I'm using Ext JS 3.3.1.

fay
24 Mar 2011, 9:12 AM
I tested this in Firefox 3.6.16 and Internet Explorer 8.0.6001.19019 (!!)

ewomack
24 Mar 2011, 9:40 AM
Thank you for testing that, Fay... very helpful, though it leaves me scratching a crater in my head... I ran everything through JSLINT and received an error I didn't understand:



Error:Problem at line 61 character 11: Do not use 'new' for side effects.
});
Implied global: Ext 3,7,31, alert 38




This points to the closing "});" for the Viewport. I'm not sure what this means.

Apart from that, I noticed that I had a "renderTo:" tag that I didn't need (it referenced an id that didn't exist). The only other thing left out of the code I posted was the function tag that wrapped the entire code block in a single function. This gets referenced by a Razor view engine cshtml page in MVC 3, but only in a single script block that references that single function.

I have to admit I'm rather flummoxed by this one... any possibility that EXT doesn't get along well with the new Razor view engine? I haven't had any other problems using it.

ewomack
24 Mar 2011, 9:45 AM
Ok, the JSLint error referred to the "new Ext.Viewport" line. If the line reads: "var viewport = new Ext.Viewport" then I receive the error "unused variable." If I remove the variable reference then I get the "side effects" error. I'm not completely sure where to go from here...

fay
24 Mar 2011, 9:55 AM
Sorry, I've never even heard of Razor... Does it work without the Razor-stuff in IE?

You might want to start a new thread - Razor-IE-specific - (and linking back to this) as this one will get overlooked given the title and the fact that it's had a few replies.