解决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在浏览器中显示可能有问题，界面将会拉的很长很长。如下图：

 办法：

1：设置css的长度

    

.x-date-menu {
    padding-top:2px;padding-bottom:2px;
    width:178px; //chrome下  自已设置适合宽度
}

 

 

2: 操作dom：

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 ：

 确定和取消按钮没显示完全

解决：改css

 

.x-date-mp-btns button{
 text-decoration:none;text-align:center;
 text-decoration:none!important;border:1px solid;padding:1px 3px 1px;
 cursor:pointer;
 width:35px;
 height:20px;
}

 

 问题3：

      

 在chrome下月份和年选择不了，点击没反应，在firefox下 点击后 下拉出现后马上就消失了。

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

li.x-menu-list-item div {
    display: inline;
}

 解决： 暂时删除 display:inline;

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