PDA

View Full Version : TreePanel CheckboxSelectionModel



Eric24
9 Mar 2010, 8:27 AM
Here's a "first draft" of a CheckboxSelectionModel for a TreePanel. It emulates the behavior of the grid's CheckboxSelectionModel in that the checkbox follows the selection list. Externally, it acts like the existing MultiSelectionModel. It works (although only tested on FF at this point); any updates/ideas/suggestions welcome...



Ext.tree.CheckboxSelectionModel = function(config) {
this.addEvents("selectionchange");
Ext.apply(this, config);
Ext.tree.CheckboxSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.tree.CheckboxSelectionModel, Ext.util.Observable, {
init : function(tree) {
this.tree = tree;
tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
tree.on("click", this.onNodeClick, this);
tree.on("checkchange", this.onCheckToggle, this);
},

onNodeClick : function(node, e) {
if (e.ctrlKey && this.isSelected(node)) this.unselect(node);
else this.select(node, e, e.ctrlKey);
},

onCheckToggle : function(node, state) {
node.ui.onSelectedChange(state);
this.fireEvent("selectionchange", this, this.tree.getChecked());
},

select : function(node, e, keepExisting) {
if (keepExisting !== true) this.clearSelections(true);
this.lastSelNode = node;
node.ui.toggleCheck(true);
return node;
},

unselect : function(node) {
node.ui.toggleCheck(false);
},

clearSelections : function(suppressEvent) {
this.suspendEvents();
var nodes = this.tree.getChecked();
for (var i = 0, iz = nodes.length; i < iz; i++) {
nodes[i].ui.toggleCheck(false);
}
this.resumeEvents();
if (suppressEvent !== true) this.fireEvent("selectionchange", this, []);
},

isSelected : function(node) {
return node.ui.isChecked();
},

getSelectedNodes : function() {
return this.tree.getChecked();
},

// TBD: enhance keyboard selection to include ctrlKey/shiftKey
onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,
selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,
selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
});