ExtJS And The Bloody TreePanel Arrow

First of all I am sorry for choose title, but I kinda lost dunno how many minutes to figure out what was wrong, and it was not me!
Please let me try to explain what was the requirement, and how I had to force ExtJS to act as I want, version 2.2.1 or 3.0RC2, it does not matter.

The Problem ...

The reason you or your company choose ExtJS is most likely because of its Office $uite / Window$ look and feel, closer than many others to a proper Desktop Application, perfect under Adobe Air, and one step forward about stability, performances, and documentation, even with the old enemy: Internet Explorer 6. Fair enough, it's a good library but, there is always a but, at the same time it does not replicate 100% same Window$ behaviors.
As example, try to click Start and Run a prompt command, explorer.
This is the typical Window$ file browser, something we deal with since ages, something still a user habit.

... In Details

How does it work? It is really simple, we have a representation of our files in the left, let's call it Tree, and many details on the right but only if we click a folder. That is the problem, the Jurassic explorer acts differently if we click the [+] rather than the folder/file. The difference is that while we are simply surfing a Tree structure, we do not need to show every single detail, preview, whatever, on the right side until we click, still on the left side, into the folder we need.
As summary, one click on the [+] to open the folder, one to [-] to close it, if we click the folder and it is closed, it will be opened as if we pressed the [+] and the right side will change showing details about that folder. Morevore, if we do a double click, nothing happen, the explorer works with click, and eventually right click. Seems to be truly simple, isn't it? It's NOT, unless I am missing an hidden part of ExtJS documentation because I swear I tried everything.

Ext.tree.TreePanel Hacked To Have More Control Over The Arrow

... where the rrow is the one in ExtJS 2, in version 3 they put a lovely [+]/[-] which reminds even more explorer surfing!!! I am not here to judge ExtJS choices, I am just writing my solution to this problem, specially because tdginnovations asked me, via twitter, to make this problem public, with solution as well.

// good old onload ...
onload = function(){

// simple function to add nodes
// just for this example
function addNodes(root, dummyData){
    for(var
        i = 0, length = dummyData.length,
        cls = {true:"file",false:"folder"},
        data, leaf;
        i < length; ++i
    ){
        data = dummyData[i];
        leaf = root.appendChild(new Ext.tree.TreeNode({
            text:data.text,
            leaf:!data.items,
            cls:cls[!data.items]
        }));
        if(data.items)
            addNodes(leaf, data.items);
    };
};

var
    // just a sync example
    // with a couple of folders
    dummyData = [
        {text:"Test 1", items:[
            {text:"Sub Test 1 1"},
            {text:"Sub Test 1 2"}
        ]},
        {text:"Test 2"},
        {text:"Test 3", items:[
            {text:"Sub Test 3 1"},
            {text:"Sub Test 3 2", items:[
                {text:"Sub Test 3 2 1"},
                {text:"Sub Test 3 2 2"}
            ]},
            {text:"Sub Test 3 3"}
        ]}
    ],
    
    // the lovely TreePanel
    TreePanel = new Ext.tree.TreePanel({
        renderTo:document.body,
        border:false,
        rootVisible: false,
        root:{
            expanded: true,
            text: "",
            draggable: false
        },
        
        // global TreePanel events
        listeners:{
        
            // Hack #1: The Lovely Arrow ..
        
            // here starts the open hack ...
            // when the arrow is clicked,
            // no click event is propagated
            // but when the node is clicked
            // beforeexpandnode is called ...
            // to avoid troubles I used a flag
            // in order to discard next
            // beforeexpandnode event
            // without returning false
            // but if this is the arrow
            // without the click ... so
            // the lonely beforeexpandnode ...
            beforeexpandnode:function(Node){
                // check if the flag is not setted
                if(!Node.beforeexpandnode){
                    // set the flag, prevent
                    // return false onclick event
                    Node.beforeexpandnode = true;
                    // fire the click event
                    // the one in charge
                    // to load or show stuff
                    Node.fireEvent("click", Node);
                    // block this call
                    // or we gonna open twice ...
                    // with possible loops
                    // (at least in Ext 2.2.1)
                    return false;
                }
            },
            // here we are ...
            // if it was a click in the name/folder/leaf
            // this event is fired before beforeexpandnode
            // we need to check a couple of things ... 
            click:function(Node, e){
                // if node is expanded
                // we do not need to do anything
                if(Node.isExpanded()){
                    console.log("already expanded");
                }
                // but if node is not expanded
                // and the beforeexpandnode flag 
                // has been setted as true ...
                else if(Node.beforeexpandnode) {
                    // we know that this click
                    // is from the arrow, and not
                    // from the folder or name
                    console.log("expand via arrow/plus or minus");
                    // we can load stuff async, putting
                    // a mask to the panel before, removing it
                    // on load success, add nodes
                    // and finally expand this Node
                    // this if should not exists if
                    // the node is a leaf, cause there
                    // is no arrow beside
                    Node.expand();
                }
                // if node is not expanded but it is
                // a folder and beforeexpandnode flag
                // has not been setted as true
                // we know that the user performed
                // a click ...
                else if(!Node.isLeaf()) {
                    // to avoid another click event
                    // triggered via beforeexpandnode event
                    // we need to set the flag as true
                    // so beforeexpandnode will not
                    // return false calling this event
                    // again (precedent if)
                    Node.beforeexpandnode = true;
                    // at this point we could perform
                    // a different request
                    // which could return the entire node
                    // list plus some other information
                    // or simply do something else
                    // rather than just populate the 
                    // Node with sub-nodes
                    console.log("expand via click");
                    // in this case, let's expand the node
                    Node.expand();
                }
                // none of precedent condition
                // was true, interesting ...
                // ... it must be just a leaf ;)
                else {
                    // let's do something
                    // with this leaf
                    console.log(Node.text);
                };
                // the main problem with click
                // is that it is not possible
                // to avoid a double click
                // e.stopEvent() ? no way
                // it does not do anything with
                // dblclick, useless
            },            
            // last part of this little hack ...
            // once the node is expanded
            // it makes sense to 
            // set the flag as false
            // so next beforeexpandnode event
            // will work as expected
            expandnode:function(Node){
                Node.beforeexpandnode = false;
            },
            
            // Hack #2: ... I said:
            // DO NOT CLOSE ON DOUBLE CLICK!!!
            
            // at least this hack is even shorter
            // but it still requires 2 events
            // dblclick, as I said, cannot be
            // stopped ... but it does not
            // really matter, cause
            // beforecollapsenode will be fired
            // always before ... so, even
            // implementing a proper stopEvent
            // how could we avoid closing action
            // from beforecollapsenode event
            // since this is fired before 
            // dblclick?
            
            // dblclick has to be a sort
            // of filter able to change
            // another flag
            // beforecollapsenode
            // if node is expanded
            // we set the flag as false
            // why ? ... read next ...
            dblclick:function(Node, e){
                if(Node.isExpanded())
                    Node.beforecollapsenode = false;
            },
            
            // beforecollapsenode event
            // is fired before dblclick
            // so this hack is about milliseconds.
            // if the flag is not set
            // we set it as true and we call a timetout
            // Hopefully, the double click will be performed
            // before choose timeout.
            // If this happens, it means
            // that the user double clicked the
            // opened node, otherwise
            // it means that the user did not
            // mean a double click (the arrow
            // does NOT fire a dblclick in any case)
            // while He/She simpl clicked once in
            // the arrow (or more than once to close it)
            beforecollapsenode:function(Node){
                if(!Node.beforecollapsenode){
                    Node.beforecollapsenode = true;
                    setTimeout(function(){
                        // so here this hack should
                        // perform its action ...
                        if(Node.beforecollapsenode)
                            // closing the node
                            // if it was not a dblclick
                            Node.collapse();
                    }, 20);
                    return false;
                }
            },
            // to complete the task
            // let's reset status 
            // on node collapsed
            collapsenode:function(Node){
                Node.beforecollapsenode = false;
            }
        }
    })
;

// it's time to test
addNodes(TreePanel.getRootNode(), dummyData);
// and play with this version
TreePanel.render();

};

That's it, waiting for comments, better examples, or even solution I could not think about!