jueves, mayo 07, 2009

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);

2 comentarios:

Rogério Carrasqueira dijo...

Olla!

Mi nombre es Rogerio, soy de Brasil. Me gusta mirar um ejemplo de como usted llama TreeCombox em su codigo. Otra pregunta, usted puede permitir que hace un download de el?

Muchas Gracias,

Rogério Carrasqueira

78022019049 dijo...

Hola me gustaria ver el ejemplo que se muestra en los screeshots sobre este plugin, de ser posible

saludos