Question

我有一个ExtJs框架的Ext.Date.Picker组件（v 4.1.1）。

我已经修改了内部网格面板行的大小（包含了一个月中的几天），并且我想要放大矩形灰色框，就像我为“21”那天做的那样，以及垂直方向将“21”（以及其他日期）对齐在单元格的中心。

Boxes not aligned

我试过使用CSS。我已宣布：

vertical-align: middle !important;

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

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

谢谢大家

更新：

我已经准备好了解决这个问题的方法：

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

ExtJs DatePicker通过CSS垂直对齐内容

1 个答案: