TreeCombo (ExtJS)

Pequeña extensión para extender un Tree con un Combo.

/**
* @author Possible author is roytmana
* @version 1.0
* @class Ext.ux.TreeCombo
* @extends Ext.form.ComboBox
*+++++++++++++++++++++++++++++++++++++++
*          Edit by HACKPRO TM
*+++++++++++++++++++++++++++++++++++++++
*/

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {

lastKeys : '',
admitLeaf: true,
treeTypeAhead: false,

initList : function() {
if (this.list != undefined) {
return;
}

if (this.editable !== false) {
this.el.on("keyup", this.onKeyUpTree, this)
}

if (this.treeTypeAhead) {
this.taTask = new Ext.util.DelayedTask(this.onTreeTypeAhead, this);
}

var tConf = {
floating : true,
listeners : {
click : this.onNodeClick,
scope : this
},

alignTo : function(el, pos) {
this.setPagePosition(this.el.getAlignToXY(el, pos));
},
keys : [{
key : 9,
fn : function() {
this.onNodeClick(this.list.getSelectionModel()
.getSelectedNode());
},
scope : this
}, {
key : 27,
fn : function() {
this.collapse();
this.focus(true, true);
},
scope : this
}]

};

if (this.treeConfig) {
Ext.applyIf(tConf, this.treeConfig);
if (this.treeConfig.listeners) {
Ext.applyIf(tConf.listeners, this.treeConfig.listeners);
}

if (tConf.loader) {
tConf.loader.on("load", this.onTreeLoad, this);
}

}

this.list = new Ext.tree.TreePanel(tConf);

if (!this.list.rendered) {
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.render(document.body);
this.list.setWidth(lw);
this.list.alignTo(this.wrap, this.listAlign);
this.innerList = this.list.body;
this.innerList.setWidth(lw);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.list.hide();
}

},

doQuery : function(q, forceAll) {
this.expand();
},

collapseIf : function(e) {
if (!e.within(this.wrap) && !e.within(this.list.el)) {
this.collapse();
}

},

selectNext : function() {
var sm = this.list.getSelectionModel();
if (!sm.getSelectedNode()) {
sm.select(this.list.getRootNode());
}

sm.selectNext();
},

selectPrev : function() {
var sm = this.list.getSelectionModel();
if (!sm.getSelectedNode()) {
sm.select(this.list.getRootNode());
}

sm.selectPrevious();
},

onViewClick : function(doFocus) {
this.collapse();
if (doFocus !== false) {
this.el.focus();
}

},

findNode : function(value, node, rootPath, like) {
var field = this;

if (node == null || node == undefined) {
node = field.list.getRootNode();
}

var value = value;

if (node.isLoaded() == true) {
if (node.childNodes.length > 0) {
field.nodeFound = node.findChild('text', value);

if (field.nodeFound == null || field.nodeFound == undefined) {
node.cascade(function() {
if (this.text == value) {
if ( (this.getPath('text') == rootPath) ||
(rootPath == null) ) {
field.nodeFound = this;
}

} else if (like == true) {
var str = this.text;
var found = str.indexOf(value);

if (found >= 0) {
field.nodeFound = this;
}

}

if (field.nodeFound != null
&& field.nodeFound != undefined) {
return false;
}

});

}

}

} else {
field.list.getLoader().load(node, function(loader, node, rootPath, like) {
node.loaded = true;
field.nodeFound = field.findNode(value, node, rootPath, like);
});

}

return field.nodeFound;
},

setValue : function(value, rootPath) {
if (this.list == undefined) {
this.initList();
}

if (value == '') {
this.setRawValue('');
return;
}

this.el.removeClass(this.emptyClass);
var nodeFound = this.findNode(value, null, rootPath, null);

if (nodeFound != null && nodeFound != undefined) {
text = nodeFound.attributes['text'];

if (text.length == 0) {
text = (!empty(this.value) ? this.value : '');
}

if ( (nodeFound.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var nodePath = nodeFound.getPath();
var treeRoot = this.list.getRootNode();
treeRoot.reload();
this.list.expandPath(nodePath);
this.list.selectPath(nodePath);

this.setRawValue(text);

if (this.hiddenField) {
this.hiddenField.value = value;
}

} else {
this.setRawValue();
var treeroot = this.list.getRootNode();
treeroot.reload();
this.list.collapseAll();
}

},

setValueFromNode : function(node) {
this.setRawValue(node.attributes.text);
if (this.hiddenField) {
this.hiddenField.value = node.id;
}

},

openCombo : function(){
this.onTriggerClick();
},

onTreeTypeAhead : function(){
var newValue = this.getRawValue();
var selStart = this.getRawValue().length;

if (selStart <= 0) {
this.setRawValue('');
var treeroot = this.list.getRootNode();
treeroot.reload();
this.list.collapseAll();
return;
}

var nodeFound = this.findNode(newValue, null, null, true);

if (nodeFound != null && nodeFound != undefined) {
text = nodeFound.attributes['text'];
var len = text.length;

if (selStart != len) {

if ( (nodeFound.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var nodePath = nodeFound.getPath();
var treeRoot = this.list.getRootNode();
treeRoot.reload();
this.list.expandPath(nodePath);
this.list.selectPath(nodePath);

this.setRawValue(text);
this.selectText(selStart, text.length);

if (this.hiddenField) {
this.hiddenField.value = newValue;
}

this.focus.defer(10, this);
}

}

},

onKeyUpTree : function(A) {
if (this.editable !== false && !A.isSpecialKey()) {
this.lastKeys = A.getKey();

if (this.treeTypeAhead && (this.lastKeys == Ext.EventObject.BACKSPACE || this.lastKeys == Ext.EventObject.DELETE) ) {
this.taTask.delay(250);
return;
}

if (this.treeTypeAhead) {
this.onTreeTypeAhead();
}

}

},

onNodeClick : function(node, e) {
if ( (node.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var oldValue = this.getValue();
this.setValueFromNode(node);
this.collapse();
if (this.treeTypeAhead) {
this.focus(true, false);
} else {
this.focus(false, false);
}

this.fireEvent('select', this, oldValue, this.getValue());
this.fireEvent('change', this, node);
this.fireEvent('rootchanged', node);
},

onTreeLoad : function(loader, node, response) {
if (this.list.getRootNode() == node) {
if (this.hiddenField && this.hiddenField.value
&& this.hiddenField.value != '') {
var n = this.list.getNodeById(this.hiddenField.value);
if (n) {
n.select();
this.setRawValue(n.attributes.text);
} else {
this.list.getSelectionModel().clearSelections();
this.setRawValue('');
this.hiddenField.value = '';
}

}

}

}

});

Ext.reg('treecombo', Ext.ux.TreeCombo);