What difference between them?

[netharry]

hi,all
I found those two ways have the same results,what difference between them? thanks.
first one:


Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'Default.aspx'
})
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});

second:


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

return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel({
el:'tree-div',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'Default.aspx'})
});
// 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();
}
};
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

[mdelanno]

In the second one, you create an object named TreeTest.

The return block is a trick: Javascript don't support the private and protected keywords. All the members are public. It's a workaround to make the Tree member private. You can't access it with TreeTest.Tree

I hope I'm clear because english is not my primary language (like Javascript). :D

[evant]

The first one just executes all of that code inline in that scope.

The second creates a singleton (http://en.wikipedia.org/wiki/Singleton_pattern) object to wrap the tree.