解决Ext.form.DateField在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';
		}
	}
});

方法二:

解决Ext.form.DateField在浏览器中显示可能有问题,界面将会拉的很长很长。如下图:


解决Ext.form.DateField在Chrome等浏览器宽度异常的问题
 办法:

1:设置css的长度

    

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';  
            }  
        }  
    });  

  问题2 :
解决Ext.form.DateField在Chrome等浏览器宽度异常的问题
 确定和取消按钮没显示完全

解决:改css

Css代码  解决Ext.form.DateField在Chrome等浏览器宽度异常的问题
  1. .x-date-mp-btns button{  
  2.  text-decoration:none;text-align:center;  
  3.  text-decoration:none!important;border:1px solid;padding:1px 3px 1px;  
  4.  cursor:pointer;  
  5.  width:35px;  
  6.  height:20px;  
  7. }  

 问题3:

      
解决Ext.form.DateField在Chrome等浏览器宽度异常的问题
 在chrome下月份和年选择不了,点击没反应,在firefox下 点击后 下拉出现后马上就消失了。

     原因: 使用了ux-all.css,或者使用了GridFilter.css 里面的冲突了

Css代码  解决Ext.form.DateField在Chrome等浏览器宽度异常的问题
  1. li.x-menu-list-item div {  
  2.     display: inline;  
  3. }  

 解决: 暂时删除 display:inline;

  参考:http://stackoverflow.com/questions/6410894/extjs-cant-select-month-year-in-datepicker

相关推荐