在extjs中有一个字段是日期格式,我想直接使用extjs控件,这样可以选择日期。字段属性如下
- {
- 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
- 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
- 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
- ...
- <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,如需转载请自行联系原作者