Ext.form.DateField在chrome、safari下显示异常的解决方法

最近在用extjs的DateField控件的时候,总是出现时间空间显示的时候宽度占满了整个屏幕,后来发现这个extjs在chrome下面的一个bug。

 

解决方式一:

在js中添加一下语句

 

 if(Ext.isChrome===true){       
        var chromeDatePickerCSS = ".x-date-picker {border-color: #1b376c;background-color:#fff;position: relative;width: 185px;}";
        Ext.util.CSS.createStyleSheet(chromeDatePickerCSS,'chromeDatePickerStyle');
    }

 

 

解决方式二:

在js中重写DateMenu

<script>
//Extjs2.2.1 DateField 变形的问题
// IE
Ext.isIE9 = Ext.isIE && navigator.userAgent.indexOf('MSIE 9')!=-1;
Ext.isIE10 = Ext.isIE && navigator.userAgent.indexOf('MSIE 10')!=-1;
Ext.override(Ext.menu.Menu, {
    autoWidth: function() {
        var el = this.el,
            ul = this.ul;
        if (!el) {
            return;
        }
        var w = this.width;
        if (w) {
            el.setWidth(w);
        } else if (Ext.isIE && !Ext.isIE8 && !Ext.isIE9 && !Ext.isIE10) {
            el.setWidth(this.minWidth);
            var t = el.dom.offsetWidth;
            el.setWidth(ul.getWidth() + el.getFrameWidth("lr"));
        }
    }
});
// chrome
Ext.override(Ext.menu.DateMenu, {  
    render : function() {  
        Ext.menu.DateMenu.superclass.render.call(this);  
        if (Ext.isGecko || Ext.isSafari || Ext.isChrome) {  
            this.picker.el.dom.childNodes[0].style.width = '178px';  
            this.picker.el.dom.style.width = '178px';  
        }  
    }  
}); 
</script>

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值