PDA

View Full Version : Problem with browser's catch up?



Topper
22 Nov 2007, 6:38 AM
Hello guys. I have a page with the two-trees example in it. The tree's work fine...but seems that there's some problem with the browser's catch up. Why? Seems that if the ext code executes before the browser can read the containers div, the tree's wont load. I guess this is the problem because putting a simple javascript alert before tree execution makes the page work perfectly. Without the alert, the trees load sometimes and other times not. I tried to make a recursive call to the function that creates the trees so it would execute only if some of the tree containers isnt null but it didnt work. Is there any delay() function I could use? Here's the code.



<html>
<head>
<style type="text/css">
#tree, #tree2 {
float:left;
margin:20px;
border:1px solid #c3daf9;
width:250px;
height:300px;
}
.folder .x-tree-node-icon{
background:transparent url(../../resources/images/default/tree/folder.gif);
}
.x-tree-node-expanded .x-tree-node-icon{
background:transparent url(../../resources/images/default/tree/folder-open.gif);
}
</style>

<script type="text/javascript">

var TreeTest = function(){
// shorthand
var Tree = Ext.tree;

return {
init : function(){


var buildTrees = function(){

var tree = Ext.get('tree');
//alert(tree); --> with this simple alert the page works fine.
if (tree){

// yui-ext tree
var tree = new Tree.TreePanel({
el:'tree',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'ordenarHome.do?id=1'}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();

root.expand(false, /*no anim*/ false);

//-------------------------------------------------------------

// YUI tree
var tree2 = new Tree.TreePanel({
el:'tree2',
animate:true,
autoScroll:true,
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'ordenarHome.do?id=1',
baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree2, {folderSort:true});

// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'My Files',
draggable:false,
id:'yui'
});
tree2.setRootNode(root2);
tree2.render();

root2.expand(false, /*no anim*/ false);

} else {

buildTrees();

}

}

buildTrees();

}
};
}();

Ext.onReady(TreeTest.init, TreeTest, true);

</script>
</head>
<body>

<div id="tree"></div>
<div id="tree2"></div>

</body>
</html>


Thanks in advance.

Topper
22 Nov 2007, 8:35 AM
Well...seems I solved with this line:

buildTrees.defer(1000);

If anyone has a better way to solve this, just say it.

Regards
Topper

hendricd
22 Nov 2007, 9:13 AM
on IE or Firefox (with Firebug on) ?

and, you are redefining (var tree) twice :




var buildTrees = function(){

// var tree = Ext.get('tree');
//alert(tree); --> with this simple alert the page works fine.
if (Ext.get('tree')){ //div is already there.

// yui-ext tree
var tree = new Tree.TreePanel({
elrenderTo:'tree',

animate:true,