customize eventtemplate

[mfrancia]

hi mats

i need to put two images and set the visibility of one depending of a boolean value that comes from my eventstore, how can i get this

thanks

[mats]

Simple

1. Design a new eventTemplate including your image.
2. Put your logic in the eventRenderer and use a CSS class to control the display of your image.
3. Define some CSS rules.

            eventTemplate : new Ext.Template(
                '<div id="{id}" style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">',
                    String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'west'),
                    '<img class="my-image" src="images/img.png"/>',
                    '<div class="sch-event-inner">{text}</div>',
                    String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'east'),
                '</div>'
            ).compile(),
            

function eventRenderer(eventRec) {
    return {
        cls : eventRec.get('YourProperty') === 'foo' ? 'cls-show' : 'cls-hide'  
    };
}

With some CSS

.cls-show .my-image
{
    display: block;
}
.cls-hide .my-image
{
    display: none;
}