zhegwood
24 Mar 2009, 12:52 PM
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;
}
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;
}