ExtendX Example: Adding functionality to the TreePanel

[jbraband]

This is to serve two purposes:
1) to provide an example for the community
2) to show newbies the power and ease of use of the extendX function

I needed a tree in which only the leafs (analagous to files in a folder/file structure) were selectable. Of course, instead of changing code in the core library, the best way to accomplish this is to extend one of th library's classes. Since Jack has abstracted the selection mechanisms for a tree in a "selection model" class, I decided to create a subclass of Jack's YAHOO.ext.tree.DefaultSelectionModel class. The code for this class follows:



YAHOO.ext.tree.SelectionModelLeafOnly = function(){
YAHOO.ext.tree.SelectionModelLeafOnly.superclass.constructor.call(this);
};

YAHOO.extendX(YAHOO.ext.tree.SelectionModelLeafOnly, YAHOO.ext.tree.DefaultSelectionModel, {

select : function(node){
if (!node.isLeaf()) {
return node;
}

return YAHOO.ext.tree.SelectionModelLeafOnly.superclass.select.call(this, node);
}
});


I wrote a new select method for the class which overrides that of the base class. It simply checks to see if the node to be selected (the parameter) is a leaf. If it is not a leaf (which means that it must have children), then the method returns and does no selection work. If it is a leaf it calls the superclass' select method (from the DefaultSelectionModel class) so that it can do the work to remember the newly selected node.

to get a TreePanel instance to recognize your new selection model class, it is as easy as passing an instance of your new class to the TreePanel in the config object like so:



this.itemTypeTree = new YAHOO.ext.tree.TreePanel('TreeID', { animate:true,
enableDD:false,
containerScroll: true,
rootVisible: false,
selModel: new YAHOO.ext.tree.SelectionModelLeafOnly()
});


thats all there is to it. a very simple addition to the already awesome yui-ext library!

-j

[mdissel]

I'm relative new to javascript, but i understand that it's also possible to override the default behaviour of the select function by this:


tree.getSelectionModel().select = function(node){
if (!node.isLeaf()) {
return node;
}
return Ext.tree.getSelectionModel().select.call(this, node); // or should this be Ext.tree.DefaultSelectionMode.select.call(this, node) ??
}
};

Correct?

Thanks
Marco

[yishh]

but Is that different between YUI-extend and Ext-extendx?

[jack.slocum]

mdissel your change is on an instance and works fine for a small code base, but when things get large (Ext-style) a solid OO approach/design keeps things moving quickly since code is well organized. The point is to show the usage of Ext.extend(X) which this is a great example.

In the new Ext 1.0 build, I have actually corrected an oversight (lack of "before" event for select). In the new rev you use the following code to cancel a non-leaf selection:

tree.on("beforeselect", function(sm, n){
return n.leaf ? true : false;
});

- yishh Ext adds a couple convenience functions "override" on the prototype and on the class. Other than that there is not much different anymore. Initially YUI did not have the third "overrides" parameter to define functions - extendX() added that and YUI eventually added it to extend().

[jbraband]

jack, i just downloaded the latest alpha3 ZIP and am still not seeing the beforeselect event in the TreePanel class.

error from Firebug Console:

[Exception... "'Event does not exist: "beforeselect".' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]