JavaScript image combobox v2.1 by Marghoob Suleman

Encontré hace algunos días, este gran Jquery Plugin, hice un pequeño skin para el mismo y adicione un pequeño código para arreglar un problema al cargar con elementos no visibles inicialmente.

El código original lo pueden descargar de http://www.marghoobsuleman.com/jquery-image-dropdown

Como se vería el skin que hice

Pueden descargar el skin desde aquí

No olviden visitar la web del autor.

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