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

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

  1. {  
  2.                             xtype : 'datefield',// 日期框  
  3.                             width : 220,  
  4.                             format : 'Y-m-d',  
  5.                             allowBlank : false,  
  6.                             invalidText : '您输入的日期无效,必须符合格式yyyy-mm-dd',  
  7.                             name : 'orderDate',  
  8.                             allowBlank : false,  
  9.                             fieldLabel : '订单创建时间',  
  10.                             renderer : Ext.util.Format.dateRenderer('Y-m-d'),  
  11.                             value : new Date()  
  12.                         }  
 

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

下面将解决方法:

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

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

date1.js

  1. Ext.override(Ext.menu.Menu, {  
  2.     autoWidth : function() {  
  3.         var el = this.el, ul = this.ul;  
  4.         if (!el) {  
  5.             return;  
  6.         }  
  7.         var w = this.width;  
  8.         if (w) {  
  9.             el.setWidth(w);  
  10.         } else if (Ext.isIE && !Ext.isIE6) {  
  11.             el.setWidth(this.minWidth);  
  12.             var t = el.dom.offsetWidth;  
  13.             el.setWidth(ul.getWidth() + el.getFrameWidth("lr"));  
  14.         }  
  15.     }  
  16. });  
 

date.js

  1. Ext.override(Ext.menu.DateMenu, {  
  2.     render : function() {  
  3.         Ext.menu.DateMenu.superclass.render.call(this);  
  4.         if (Ext.isGecko) {  
  5.             this.picker.el.dom.childNodes[0].style.width = '178px';  
  6.             this.picker.el.dom.style.width = '178px';  
  7.         }  
  8.     }  
  9. });  
 

main.jsp

  1. ...  
  2.         <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" mce_href="ExtJS/resources/css/ext-all.css" />  
  3.         <link rel="stylesheet" type="text/css" href="ExtJS/css/style.css" mce_href="ExtJS/css/style.css" />  
  4.         <mce:script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" mce_src="ExtJS/adapter/ext/ext-base.js"></mce:script>  
  5.         <mce:script type="text/javascript" src="ExtJS/ext-all.js" mce_src="ExtJS/ext-all.js"></mce:script>  
  6.         <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>  
  7.         <mce:script type="text/javascript" src="ExtJS/themeChange.js" mce_src="ExtJS/themeChange.js"></mce:script>  
  8.         <mce:script type="text/javascript" src="ExtJS/examples/ux/SearchField.js" mce_src="ExtJS/examples/ux/SearchField.js"></mce:script>  
  9.         <mce:script type="text/javascript" src="main/main.js" mce_src="main/main.js"></mce:script>  
  10.         <mce:script type="text/javascript" src="main/date.js" mce_src="main/date.js"></mce:script>  
  11.         <mce:script type="text/javascript" src="main/date1.js" mce_src="main/date1.js"></mce:script>  
  12. ...  
 

 





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



上一篇:Android APP 性能优化的一些思考


下一篇:冬季实战营第四期学习报告