`

解决Ext.form.DateField在浏览器中显示可能有问题

 
阅读更多

解决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

 

 

 

 

  • 大小: 35.9 KB
  • 大小: 12.6 KB
  • 大小: 22.4 KB
分享到:
评论

相关推荐

    ExtJs_xtype一览

    - `datefield`:`Ext.form.DateField`,日期选择输入框。 - `timefield`:`Ext.form.TimeField`,时间输入框。 - `field`:`Ext.form.Field`,表单的基础字段。 - `fieldset`:`Ext.form.FieldSet`,用于组织...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ExtJs组件类的对应表

    7. **`statusbar`** - `Ext.StatusBar`,状态条组件,可以显示应用程序的状态信息,曾在2.2版本加入后,在3.0版本中移除。 8. **`colorpalette`** - `Ext.ColorPalette`,调色板组件,用于选择颜色。 9. **`...

    extJs xtype 类型

    4. **`datefield`:** 日期选择项组件,用于让用户选择日期,通过`Ext.form.DateField`类实现。 5. **`timefield`:** 时间录入项组件,用于让用户输入时间,通过`Ext.form.TimeField`类实现。 6. **`field`:** 表单...

    精通JS脚本之ExtJS框架.part1.rar

    7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...

    ExtJs xtype一览

    - **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件,用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件,允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件...

    精通JS脚本之ExtJS框架.part2.rar

    7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...

    extjs控件列表

    **Ext.form.DateField** - **描述**: 日期选择项,用户可以输入或选择日期。 - **用途**: 事件日期、出生日期等。 **Ext.form.TimeField** - **描述**: 时间录入项,用户可以输入或选择时间。 - **用途**: 会议时间...

    Extjs xtype集合

    - **`Class`**: `Ext.form.DateField` - **描述**: 日期选择字段。 5. **`timefield`:** - **`xtype`**: `timefield` - **`Class`**: `Ext.form.TimeField` - **描述**: 时间输入字段。 6. **`field`:** -...

    extjs中dateField日期精确到时分秒的扩展控件

    在EXTJS这个强大的JavaScript框架中,DateField是一个用于输入日期的控件,通常它只允许用户选择年、月、日。然而,在某些情况下,我们可能需要将日期字段扩展到包括小时、分钟和秒,以便更精确地管理时间数据。这篇...

    extjs3.2、3.3 时间控件 日期控件扩展

    - 在ExtJS 3.2和3.3中,DateTimeField通常通过`Ext.form.DateTimeField`类创建,并且可以自定义显示格式、最小值、最大值等属性。 - 示例代码:`var dateTimeField = new Ext.form.DateTimeField({ ... });` - ...

    Extjs4.2时间选择插件精确到时分秒

    然后,在ExtJS的应用配置中,我们可以创建一个基于Ext.form.field.Time的自定义字段,通过配置`format`属性来指定时间格式,例如`'H:i:s'`,这样就能显示小时、分钟和秒了。如果DateTime.js提供了额外的配置选项或...

    extjs4能用的带时分秒的日期控件

    在ExtJS 4中,虽然默认的日期选择器(DateField)只支持选择日期,但通过扩展或使用第三方插件,我们可以实现带有时分秒的选择器。这个"extjs4能用的带时分秒的日期控件"可能就是一个定制的组件,它允许用户不仅选择...

    基于EXTJS简明教程2.0的笔记

    15. **Ext.form.FormPanel** 用于创建表单,可以配置`labelAlign`(标签对齐方式)和`defaultType`(默认组件类型),表单组件在`items:[]`中定义,每个组件有自己的属性如`fieldLabel`和`name`。 16. **Accordion...

    ComboBox 和 DateField 在IE下消失的解决方法

    问题发生的状况 因为是在原项目的基础上导入Ext js , 所以页面中的form 并不是通过标准的 先创建form 组件, 再add form field 的方式进行的。 这里使用的 是纯html的form 和 input, 再使用Ext js 把 input render ...

    Extjs4 日期控件,带年月日时分秒

    在ExtJS4中,日期控件是开发人员经常使用的组件之一,它允许用户选择日期、时间或两者兼有,以便进行数据输入或显示。本篇文章将深入探讨ExtJS4中的日期控件,特别是那些包含年、月、日、时、分、秒的复杂日期时间...

    JS中的使用技巧,每一项都是js中的小技巧

    根据给定的信息,我们可以总结出一系列JavaScript中的实用技巧与知识点。这些技巧涵盖了基本操作、DOM操作、数据类型处理以及常用内置对象的使用等多方面内容。 ### 1. 输出到文档 - `document.write("")`:可以将...

    ExtJS基础教程.pdf

    ExtJS完全基于纯JavaScript,不依赖于任何浏览器插件,这使其能够在多种主流浏览器上无缝运行。 #### 二、ExtJS的特点 1. **跨浏览器兼容性**:ExtJS支持包括IE、Firefox、Chrome、Safari等在内的主流浏览器,确保...

    extjs的快速入门教程

    - 页面的主要显示区域,通常占据浏览器窗口的大部分空间。 5. **窗口(Window)及对话框(MessageBox)**: - **窗口**: 弹出式的独立区域,可以用于显示额外的信息或收集用户输入。 - **对话框**: 用于简单的消息提示...

Global site tag (gtag.js) - Google Analytics