Hello, I am trying to follow some of your examples and show custom styling in the display value for my Combo's.
In the EventEdit I have combos for event style, event color and icon class. You have an example here https://bryntum.com/examples/scheduler/dragfromgrid/ that I was trying to follow.
Originally my combo config was like this:
{
type : 'combo',
name : 'iconCls',
label : 'Icon',
placeholder : 'Choose icon',
editable : false,
valueField : 'id',
displayField : 'value',
store : new Store({
data : [
{ id : 'b-fa b-fa-wrench', value : 'Wrench'},
{ id : 'b-fa b-fa-hammer', value : 'Hammer'},
{ id : 'b-fa b-fa-soap', value : 'Soap'},
{ id : 'b-fa b-fa-clock', value : 'Alarm Clock'},
{ id : 'b-fa b-fa-bell', value : 'Bell'},
{ id : 'b-fa b-fa-clipboard-list', value : 'Clipboard List'},
{ id : 'b-fa b-fa-truck', value : 'Truck'},
{ id : 'b-fa b-fa-dolly', value : 'Dolly'},
{ id : 'b-fa b-fa-cart-flatbed', value : 'Cart Flatbed'},
]
}),
listItemTpl : (item: Dropdown) =>
`<i class="${item.id}" style="margin-right: 1em"></i>${item.value}`
}
But I was able to create an IconCombo.js and copy the code from your example and make it work like so:
{
type : 'iconcombo',
name : 'iconCls',
label : 'Icon',
placeholder : 'Choose icon',
editable : false,
valueField : 'id',
displayField : 'value',
}
My question is is this achievable through using the
displayValueRenderer
instead?
Your example uses methods of
syncInputFieldValue(...args) {
this.icon.className = this.value;
super.syncInputFieldValue(...args);
}
and
get innerElements() {
return [
{
reference : 'icon',
tag : 'i',
className : 'b-fa b-fa-cog',
style : {
marginLeft : '.8em',
marginRight : '-.3em'
}
},
...super.innerElements
];
}
which are not available anywhere in your documentation about Combo's, so I do not under stand what is happening with these methods.
Also, is there any examples of how I can apply the same custom styling to the other combo's in order to show the color square next to the color name, or the event style in the display value like they appear in the dropdown list?
I can make this muti-color box appear all the time, but I cannot get it to switch to the selected color value like it does for the icons.
Thanks,
Cody.