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

最新推荐文章于 2022-10-09 17:52:28 发布

莯枫

最新推荐文章于 2022-10-09 17:52:28 发布

阅读量265

点赞数

分类专栏： Extjs 文章标签： Java Extjs Datefield

本文链接：https://blog.csdn.net/zyjustin9/article/details/84654161

版权

Extjs 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

最近在用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>