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!
No comments:
Post a Comment