FireFox中使用ExtJs日期控制元件錯誤的解決方法

嗯哼9925發表於2017-12-19
FirefoxJS控制元件

在extjs中有一個欄位是日期格式，我想直接使用extjs控制元件，這樣可以選擇日期。欄位屬性如下

[c-sharp] view plaincopyprint?
  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

[c-sharp] view plaincopyprint?
  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

[c-sharp] view plaincopyprint?
  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

[c-sharp] view plaincopyprint?
  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，如需轉載請自行聯絡原作者


相關文章