ExtJs DatePicker 通过 CSS 垂直对齐内容

Question

我有框架 ExtJs (v 4.1.1) 的 Ext.Date.Picker 组件。

我已经修改了内部网格面板的行的大小（包含月份中的天数），我想放大我为“21”天制作的矩形灰色框，垂直将单元格中心的“21”（和其他日期）对齐。

我尝试过使用 CSS。我已经声明：

vertical-align: middle !important;

但似乎组件忽略了这些配置。

如何使用 CSS（或者，如果可能，使用 ExtJs 框架）解决这个问题？

谢谢大家

更新：

我已经为这个问题准备了一个 jsfiddle：

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

Answer 1

我编写了一个自定义解决方案。我重新定义了组件的resize函数，如下：

/**
 * @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";
    }
},