ExtJs DatePicker vertical align content via CSS

Question

I've an Ext.Date.Picker component of the framework ExtJs (v 4.1.1).

I've modified the size of the rows of the inner grid panel (that contains days of the month), and I would like to enlarge the rectangular gray boxes as I've made for the day "21", and vertical align the "21" (and other days) in the center of the cell.

I've tried to use the CSS. I've declared:

vertical-align: middle !important;

but seems that the component ignores these configurations.

How to solve this problem using CSS (or, if possible, using the ExtJs framework)?

Thank you all

UPDATE:

I've prepared a jsfiddle with this problem:

http://jsfiddle.net/eternasparta/sH3fK/32/

Answer 1

I've written a custom solution. I've redefined the resize function of the component, as follow:

/**
 * @private
 * Handle the resizing of the grid component to best fit to the parent panel
 * @param th the picher
 * @param w the actual width
 * @param h the actual height
 */
resize:function(th,w,h){
    var arr = th.el.dom.getElementsByClassName('x-datepicker-date');

    if (!th.gridOriginalH){
        var grid = th.el.dom.getElementsByClassName('x-datepicker-inner')[0];
        th.gridOriginalH = grid.offsetHeight;
    }
    if (!th.hdOriginalH){
        var hd = th.el.dom.getElementsByClassName('x-datepicker-header')[0];
        th.hdOriginalH=hd.offsetHeight;
    }
    if (!th.footerOriginalH){
        var footer = th.el.dom.getElementsByClassName('x-datepicker-footer')[0];
        th.footerOriginalH=footer.offsetHeight;
    }
    var height=th.el.dom.clientHeight-th.gridOriginalH-th.hdOriginalH-th.footerOriginalH;
    //seven are the days per row
    var residual = (height%12)*7;
    residual +=th.paddingCorrection;
    //round to next int
    height=parseInt(height/12);
    for (var i =0; i<arr.length;i++){
        arr[i].style.textAlign="center !important";
        //add residual spaces
        if (residual>0){
            arr[i].style.paddingTop = (height+1)+"px";
            arr[i].style.paddingBottom = (height+1)+"px";
            residual-=2;
        }
        else{
            arr[i].style.paddingTop = height+"px";
            arr[i].style.paddingBottom = height+"px";
        }


initComponent:function(){
    var me = this;
    me.callParent(arguments);
    if (me.multiSelect == true){
        me.on('select',me.handleSelectionChanged,me);
        me.on('afterrender',me.higlighDates,me);
    }
    me.on('resize',me.resize,me);
    me.on('boxready',me.stylize,me);

},

/**
 * @private
 * Add custom style to components
 * @method stylize
 * @param th the picker
 */
stylize:function(th){
    var mp = th.createMonthPicker();
    Ext.apply(mp,{flex:1});
    mp.parent=th;
    mp.alignTo(th.monthBtn);
    mp.on('resize',function(th,w,h,wo,ho){
        //force the resize event                        
                th.setWidth(null);
                th.setHeight(null);                 
    });
    var arr =th.el.dom.getElementsByTagName('th');

    for (var i =0; i<arr.length;i++){
        arr[i].style.textAlign="center";
    }
},