PDA

View Full Version : TreeLoader NULL with IE8



matteopasqualin
2 Nov 2010, 7:58 AM
Hi all,

don't know if it's a bug or my mistake (I'm newbie with ExtJs). Please, check the code below, when I try to expand a node I got error "loader is null or not an object" with IE 8. The code works just fine with FF or Chrome.

TreePanel is inside Accordion in the West region of the viewport.

Thanx a lot

Matteo




Ext.onReady(function(){

//var treeLoader = new Ext.tree.TreeLoader( { dataUrl : '/MENU.json' } );

//Ext.QuickTips.init();
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var rootNode = new Ext.tree.AsyncTreeNode( {
text : 'Main Menu',
id : 'treeSrc',
nodeType: 'async'
});

var treeMenu = new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
height: 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
loader: new Ext.tree.TreeLoader({ dataUrl:'/MENU.json' }),
root: new Ext.tree.AsyncTreeNode()
});


var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
})
,{
region: 'south',
contentEl: 'south',
split: false,
height: 30,
minSize: 30,
maxSize: 30,
collapsible: false,
margins: '0 0 0 0'
}
,{
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 180,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
id : 'accordion1',
title: 'Navigation',
border: false,
layout : 'fit',
iconCls: 'nav', // see the HEAD section for style used
items : [ treeMenu ]
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
},
{
title : 'Buttons',
border : false,
iconCls : 'settings',
items : [
{
xtype : 'button',
id : 'btnUrl',
text : 'nuovo url'
}
]
}]
}
,{
region: 'center',
//xtype : 'iframepanel',
xtype : 'panel',
id : 'mainPanel',
title : 'Welcome',
defaultSrc : '/test.html',
layout : 'fit'
//fitToParent: true,
}
]

});

});

</script>
</head>
<body>
<div id="west" class="x-hide-display"></div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;"></div>
<div id="south" class="x-hide-display">
<p>footer text here</p>
</div>
</body>
</html>



The JSON file:




[
{ id : '0', text : 'Home', href : '/test.html', leaf : true, hrefTarget : 'mainPanel' },
{ id : 1, text : 'News', leaf : false, href : '', hrefTarget : 'mainPanel',
children : [ { id : 2, text : 'News', leaf : true, href : '/test.html', hrefTarget : 'mainPanel' }, ] },
]

matteopasqualin
3 Nov 2010, 5:37 AM
bumped...

Condor
3 Nov 2010, 5:59 AM
You can see the problem better when you format the JSON data properly:

[{
id: '0',
text: 'Home',
href: '/test.html',
leaf: true,
hrefTarget: 'mainPanel'
},
{
id: 1,
text: 'News',
leaf: false,
href: '',
hrefTarget: 'mainPanel',
children: [{
id: 2,
text: 'News',
leaf: true,
href: '/test.html',
hrefTarget: 'mainPanel'
}, ]
}, ]
Those trailing commas shouldn't be there!

ps. You should configure your TreeLoader with preloadChilden:true.

matteopasqualin
3 Nov 2010, 6:16 AM
I see, it works fine now! I focused on Ext code because it worked with FF and Chrome.

Solved.

Thanx a lot Condor

Matteo