Show cool things you have done with our products


Post by qvitech »

I'm currently facing a problem with customizing the header for scheduling view.

I found information how to customize the header by using 'headerConfig'. Which is great.
I found out how to modify the class for the generated <td> (see 'red' elements in screenshot). Also works well.

However, my problem is the header row marked in yellow.
headerConfig        : {
                bottom : {
                    unit     : 'DAY',
                    align    : 'center',
                    renderer : function (start, end, config, index, eventStore) {
                        // customize css class for table header <td> ... good!
                        config.headerCls = 'amount-negative';
                        return '-2';
                    }
                },
                middle : {
                    unit     : 'DAY',
                    align    : 'center',
                    renderer : function (start, end, cfg) {
                        return Ext.Date.dayNames[start.getDay()].substring(0, 1);
                    }
                },
                top    : {
                    unit       : 'WEEK',
                    renderer : function (start, end, cfg) {
                        // formating: '(W48) 31.12.2014'
                        return  'W(' + Ext.Date.format(start, 'W') + ')  '+ Ext.Date.format(start, 'd.M.Y');
                    }
                }
            }
My question is: how can I modify the class for the surrounding "table" or "table-row" element.
"Sch.view.HorizontalTimeAxis" is hiding this from the user-code. So is it possible to change the current
behavoiur?
TimeAxisHeaderTemplate-AddOwnHeaderClass.JPG
TimeAxisHeaderTemplate-AddOwnHeaderClass.JPG (121.56 KiB) Viewed 8289 times

Post by mats »

This is not supported, why would you need that CSS class? It's easily solved using the existing CSS classes we put there.

Post by qvitech »

Changing CSS classes which are used for other scheduler headers seems to be not a good idea.
I was wondering, about that "sch-header-row-compact" which is automatically set to the last line of the header, for correct display of my header I wanted to reuse this concept for the middle line. Well - I found a way using CSS classes for all cells of the middle line (to style away the automatic padding which was to much for a compact style).

So I don't miss any functionality - well some improvement could be customized class names for top/middle/bottom header line. May be in future releases :-)

Thanx mat, for your answer.

Post by mats »

Ok, so you were able to implement a solution for what you need?

Post by qvitech »

Yes, found a way to solve my problem.

I used "config.headerCls" to overwrite the margins which are wrong from the row css class.

Thanks mats.

Post Reply