FireFox中使用ExtJs日期控件错误的解决方法-阿里云开发者社区

FireFox中使用ExtJs日期控件错误的解决方法

2017-12-19 1595

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

在extjs中有一个字段是日期格式，我想直接使用extjs控件，这样可以选择日期。字段属性如下

 
   [c-sharp] 
   view plain
   copy
   print
   ? 
  
{  
                            xtype : 'datefield',// 日期框  
                            width : 220,  
                            format : 'Y-m-d',  
                            allowBlank : false,  
                            invalidText : '您输入的日期无效,必须符合格式yyyy-mm-dd',  
                            name : 'orderDate',  
                            allowBlank : false,  
                            fieldLabel : '订单创建时间',  
                            renderer : Ext.util.Format.dateRenderer('Y-m-d'),  
                            value : new Date()  
                        }  

但是这个日期控件在FireFox下显示错误，在谷歌浏览器下显示正确。

下面将解决方法：

将下面两个js文件加入到项目webcontent/main/目录下，然后

在主jsp重，我的是main.jsp下加入这两个js文件的链接。

date1.js

 
   [c-sharp] 
   view plain
   copy
   print
   ? 
  
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.isIE6) {  
            el.setWidth(this.minWidth);  
            var t = el.dom.offsetWidth;  
            el.setWidth(ul.getWidth() + el.getFrameWidth("lr"));  
        }  
    }  
});  

date.js

 
   [c-sharp] 
   view plain
   copy
   print
   ? 
  
Ext.override(Ext.menu.DateMenu, {  
    render : function() {  
        Ext.menu.DateMenu.superclass.render.call(this);  
        if (Ext.isGecko) {  
            this.picker.el.dom.childNodes[0].style.width = '178px';  
            this.picker.el.dom.style.width = '178px';  
        }  
    }  
});  

main.jsp

 
   [c-sharp] 
   view plain
   copy
   print
   ? 
  
...  
        <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" mce_href="ExtJS/resources/css/ext-all.css" />  
        <link rel="stylesheet" type="text/css" href="ExtJS/css/style.css" mce_href="ExtJS/css/style.css" />  
        <mce:script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" mce_src="ExtJS/adapter/ext/ext-base.js"></mce:script>  
        <mce:script type="text/javascript" src="ExtJS/ext-all.js" mce_src="ExtJS/ext-all.js"></mce:script>  
        <mce:script type="text/javascript" src="ExtJS/source/locale/ext-lang-zh_CN.js" mce_src="ExtJS/source/locale/ext-lang-zh_CN.js"></mce:script>  
        <mce:script type="text/javascript" src="ExtJS/themeChange.js" mce_src="ExtJS/themeChange.js"></mce:script>  
        <mce:script type="text/javascript" src="ExtJS/examples/ux/SearchField.js" mce_src="ExtJS/examples/ux/SearchField.js"></mce:script>  
        <mce:script type="text/javascript" src="main/main.js" mce_src="main/main.js"></mce:script>  
        <mce:script type="text/javascript" src="main/date.js" mce_src="main/date.js"></mce:script>  
        <mce:script type="text/javascript" src="main/date1.js" mce_src="main/date1.js"></mce:script>  
...  

本文转自xwdreamer博客园博客，原文链接：http://www.cnblogs.com/xwdreamer/archive/2010/12/02/2297064.html，如需转载请自行联系原作者

FireFox中使用ExtJs日期控件错误的解决方法

热门文章

最新文章

相关电子书