PDA

View Full Version : combobox with renderer and custom syles when expanded



umit
26 Mar 2012, 4:53 AM
Hallo!
I thought, that it would be fine, if you have a renderer in the combobox, since the tpl is kinda handicapped.
If you want you can override it, if you want to have an extension, you can use another registration than "combo"



Ext.ux.ComboBox2 = Ext.extend(Ext.form.ComboBox, { // constructor function
constructor : function (config) {
if (config.renderer) {
//tpl überschreiben
//if(config.tpl){console.warn("TPL von Combo "+(config.dbid?config.dbid:' ')+" wird überschrieben!");}
config.tpl = '<tpl for=\".\"><div ext:qtip="{' + config.displayField + '}" class="x-combo-list-item"> {__styleField} </div></tpl>';
config.store.on("load", function () {
config.store.each(function (rec) {
var o = config.renderer(rec); //o.style kann und o.value muss vorhanden sein
if (!o.value) {
o.value = rec.get(config.displayField);
}
if (!o.style) {
o.style = "";
}
rec.set("__styleField", '<span style="' + o.style + '">' + o.value + '</span>');
});
});
}
Ext.ux.ComboBox2.superclass.constructor.apply(this, arguments);
}
});
//Registrierung auf das bestehende ext combo Element, forgive me this sin
Ext.reg("combo",Ext.ux.ComboBox2);


How to use:


{ xtype:"combo",
renderer : function (rec) {
var o = {};
o.value = rec.get("bez");
if (rec.get("rf") == 0) {
o.style = "color:red;";
o.value = rec.get("v");
}
if (rec.get("rf") == 4) {
o.style = "color:green;";
o.value = rec.get("altV");
}
return o;
},
...
}

Greets

mitchellsimoens
26 Mar 2012, 7:44 AM
How is the tpl handicapped? I find XTemplate very powerful and flexible.

umit
26 Mar 2012, 10:51 PM
Hi,
I didn't find a way to do the thing in the code example like
if 0 then color red, if 4 then color green.
Its also difficult to read.