Extension to Ext.ux.IconCombo

[zhegwood]

Couldn't find the thread where Ext.ux.IconCombo lives, but I modified it to handle when the store has some records that specify an icon class and some that don't and you don't want the icon padding to be there if there is no icon class specified.

If this has been done before, you can delete this thread. If not, hopefully it's helpful to someone:



Ext.namespace('Ext.ux');


Ext.ux.IconCombo=function(config) {

// call parent constructor
Ext.ux.IconCombo.superclass.constructor.call(this,config);

this.tpl = config.tpl ||
'<tpl for="."><div class="x-combo-list-item">' +
'<table><tbody><tr>' +
'<tpl if="'+this.iconClsField+' != \'\'">'+
'<td>' +
'<div class="{'+this.iconClsField+'} x-icon-combo-icon"></div></td>' +
'</tpl>'+
'<td>{'+this.displayField+'}</td>'+
'</tr></tbody></table>'+
'</div></tpl>';
}

Ext.extend(Ext.ux.IconCombo,Ext.form.ComboBox,{
initial: true,

setIconCls: function() {
var rec=this.store.query(this.valueField,this.getValue()).itemAt(0);
if(rec) {
if (rec.get(this.iconClsField) !== "") {
this.flag.className='x-icon-combo-icon '+rec.get(this.iconClsField);
for(var a=0;a<this.flag.parentNode.childNodes.length;a++) {
var node=this.flag.parentNode.childNodes[a];
if(node.className.indexOf("x-icon-combo-input") === -1 && node.className.indexOf("x-form-text") !== -1) {
nodeObj=Ext.get(node);
nodeObj.addClass("x-icon-combo-input");
nodeObj.setWidth(nodeObj.getWidth() - 22);
break;
}
}
} else {
for (var a = 0; a < this.flag.parentNode.childNodes.length; a++) {
var node = this.flag.parentNode.childNodes[a];
if (node.className.indexOf("x-icon-combo-input") !== -1 && node.className.indexOf("x-form-text") !== -1) {
this.flag.className='x-icon-combo-icon';
nodeObj = Ext.get(node);
nodeObj.removeClass("x-icon-combo-input");
nodeObj.setWidth(nodeObj.getWidth() + 22);
break;
}
}
}
}
},

setValue: function(value) {
Ext.ux.IconCombo.superclass.setValue.call(this,value);

if (this.initial) {
var wrap=this.el.up('div.x-form-field-wrap');
this.wrap.applyStyles({ position: 'relative' });
this.flag=Ext.DomHelper.append(wrap,{
tag: 'div',style: 'position:absolute'
});
this.initial = false;
}

this.setIconCls();
}
});


Here's the modified css (the added classes will only change the background-position of the sprite to display the correct icon):


/* Icon combo styles */
.x-icon-combo-icon {
background-image: url(path to sprite);
background-repeat: no-repeat;
background-position: 0 16px;
width: 16px;
height: 16px;
}
.x-combo-list-item td {white-space:nowrap;}
.x-icon-combo-input {
padding-left: 25px;
}
.x-form-field-wrap .x-icon-combo-icon {
top: 3px;
left: 5px;
}
.x-icon-combo-item {
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px;
}

[jsakalos]

I originally wrote IconCombo in the form of tutorial.

Any pictures of your modification?

[zhegwood]

Added a couple screenshots. This works in Windows/Opera, IE7, and FF3 but broken in Windows/Safari... No access to a Mac to test Mac Safari or FF

[jsakalos]

Thank you. Now users who may want the same can see the result. :)