ExtJS4.2学习(18)时间控件（转）

最新推荐文章于 2021-01-17 13:19:25 发布
最新推荐文章于 2021-01-17 13:19:25 发布
阅读量152 收藏
点赞数
文章标签： ux javascript java ViewUI

鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-22/190.html

感谢“束洋洋 ”的付出。

前言：以下博客内容全是拷贝上述网址的，不过是自己运行一遍罢了，做点记录。

一、事件控件一

1.效果图：

2.代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ext-4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">  
<script src="../ext-4.2.1/ext-all.js"></script>  
<script src="../ext-4.2.1/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript">  
Ext.onReady(function(){  
  
    var field = new Ext.form.TextField({  
        fieldLabel: 'empty', //输入控件前显示名称  
        allowBlank: false, //是否允许为空  
        emptyText:'空', //没有输入任何内容提示文字  
        maxLength:50, //输入最大字符串长度  
        minLength:10 //输入最小字符串长度  
    });  
      
    var fieldTextArea = new Ext.form.TextArea({  
        width:200,  
        grow:true, //会根据输入内容自动修改自身高度  
        preventScrollbars:true, //防止出现滚动条，如果内容超出显示范围就会自动隐藏  
        fieldLabel:'empty',  
        allowBlank:false,  
        emptyText:'空',  
        maxLength:50,  
        minLength:10  
    });  
      
    var fieldDate = new Ext.form.DateField({  
        fieldLabel:'日期',  
        emptyText:'请选择',  
        format:'Y-m-d',  
        disabledDays:[0,6] //禁止选择的日期  
    });   
      
    var timeDate = new Ext.form.TimeField({  
        fieldLabel:'时间',  
        emptyText:'请选择',  
        format:'H:i:s',  
        increment:1 //时间颗粒度  
    });   
  
    var form = new Ext.form.FormPanel({  
        title: '表单输入控件演示',  
        width:500,  
        frame: true,  
        items: [field,fieldTextArea,fieldDate,timeDate],  
        renderTo: 'form'  
    });  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者：束洋洋  
开始日期：2013年12月11日21:13:50  
<h2>深入浅出ExtJS之文本输入控件Ext.form.TextField</h2>  
<div id="form"></div>  
</body>  
</html>

上面是官方给的时间控件效果，没有精确到秒，网上有人自己编写了事件控件，下载地址见本博客的鸣谢地址（有两个），下载后，见下节。

二、时间控件二

效果图：

代码：（注：下面代码的引用文件没有引用汉化的js，但没有出现乱码，所有就没有引用。）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="../ext-4.2.1/myplugin/datetime1/resources/css/ext-all.css"> 
     
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/ext-all.js"></script>  
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/dateTimePicker.js"></script>
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/dateTimeField.js"></script> 

<script type="text/javascript">
      
Ext.onReady(function(){
    /* var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: '简单示例',
        height : 500,
        layout : 'hbox',
        items : [
            {
                xtype : 'datetimefield',
                format : 'Y-m-d H:i:s'
            },
            {
                xtype : 'datetimefield',
                format : 'Y-m-d H:i:s'
            }
        ]
    }); */
    
    var form = new Ext.form.FormPanel({  
        title: '表单输入控件演示',  
        width:500,  
        frame: true,  
        items: [{  
            xtype:'datetimefield',  
            width : 300,  
            labelWidth : 80,  
            endDateField:'etime',  
            vtype:'daterange',  
            fieldLabel: '开始时间',  
            format: 'Y-m-d H:i:s ',  
            name:'stime'  
        },  
        {  
            xtype:'datetimefield',  
            width : 300,  
            labelWidth : 80,  
            startDateField:'stime',  
            vtype:'daterange',  
            fieldLabel: '结束时间',  
            format: 'Y-m-d H:i:s ',  
            name:'etime'  
        }],  
        renderTo: 'myform'  
    });  
});
</script>
</head>
<body>
<div id="myform"></div>  
</body>
</html>

项目结构如下：

说明：1.虽然此版本的时间控件可以精确到秒，但此版本从显示效果上看显然不是4.2.1版本的。2.此版本的时间控件在HTML中只能引用上图中datetime1文件夹中的文件，比如说不能引用"../ext-4.2.1/ext-all.js"代替"../ext-4.2.1/myplugin/datetime1/ext-all.js"，所以说使用该控件是与Extjs4.2.1版本不统一的，并非理想方案。那么有没有与Extjs4.2.1版本相统一的时间控件呢？见下一节。

三、时间控件三

效果图：（注：此效果图并不是像本博客的其他效果图是经过本人运行出来的，而是直接拷贝本博客鸣谢网址中的。）

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ext-4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">  
<script src="../ext-4.2.1/ext-all.js"></script>  
<script src="../ext-4.2.1/locale/ext-lang-zh_CN.js"></script>  
  
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/UX_TimePickerField.js"></script>  
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/UX_DateTimePicker.js"></script>  
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/UX_DateTimeMenu.js"></script>  
<script type="text/javascript" src="../ext-4.2.1/myplugin/datetime1/UX_DateTimeField.js"></script>  
<script type="text/javascript">  
Ext.onReady(function(){  
    Ext.Loader.setConfig({enabled:true});  
    Ext.define('', {  
          extend: 'Ext.form.field.Date',  
          alias: 'widget.datetimefield',  
          requires: ['Ext.ux.DateTimePicker'],  
          initComponent: function() {  
              this.callParent();  
          },  
          // overwrite  
          createPicker: function() {  
              var me = this,  
                  format = Ext.String.format;  
              return Ext.create('Ext.ux.DateTimePicker', {  
                    ownerCt: me.ownerCt,  
                    renderTo: document.body,  
                    floating: true,  
                    hidden: true,  
                    focusOnShow: true,  
                    minDate: me.minValue,  
                    maxDate: me.maxValue,  
                    disabledDatesRE: me.disabledDatesRE,  
                    disabledDatesText: me.disabledDatesText,  
                    disabledDays: me.disabledDays,  
                    disabledDaysText: me.disabledDaysText,  
                    format: me.format,  
                    showToday: me.showToday,  
                    startDay: me.startDay,  
                    minText: format(me.minText, me.formatDate(me.minValue)),  
                    maxText: format(me.maxText, me.formatDate(me.maxValue)),  
                    listeners: {  
                        scope: me,  
                        select: me.onSelect  
                    },  
                    keyNavConfig: {  
                        esc: function() {  
                            me.collapse();  
                        }  
                    }  
                });  
          }  
      });  
    var form = new Ext.form.FormPanel({  
        title: '表单输入控件演示',  
        width:500,  
        frame: true,  
        items: [{  
            xtype:'datetimefield',  
            width : 300,  
            labelWidth : 80,  
            endDateField:'etime',  
            vtype:'daterange',  
            fieldLabel: '开始时间',  
            format: 'Y-m-d H:i:s ',  
            name:'stime'  
        },  
        {  
            xtype:'datetimefield',  
            width : 300,  
            labelWidth : 80,  
            startDateField:'stime',  
            vtype:'daterange',  
            fieldLabel: '结束时间',  
            format: 'Y-m-d H:i:s ',  
            name:'etime'  
        }],  
        renderTo: 'form'  
    });  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者：束洋洋  
开始日期：2013年12月11日21:13:50  
<h2>深入浅出ExtJS之文本输入控件Ext.form.TextField</h2>  
<div id="form"></div>  
</body>  
</html>

很可惜，没有运行出来，在谷歌浏览器上看的异常提示为：

Uncaught TypeError: m.onAdded is not a function

在 var form = new Ext.form.FormPanel({  这一行代码上。

原因目前未知。

weixin_34146986
关注
Extjs6 日期时间控件
12-27
extjs6 的日期时间控件，在日期控件的基础上添加了时间控件，使用combobox下拉选择时间，比使用numberfield更易操作。
Ext JS 6：将日期字段修改为日期时间字段（二）
黄灯桥的专栏
08-13 1963
在上文《Ext JS 6：将日期字段修改为日期时间字段（一） 》（以下称文一）只是简单的利用日期选择字段的源代码创建了一个日期时间选择字段，而不是采用继承的方式，因而在本地化上，并不能很好的利用日期选择字段的本地化资源，需要自己考虑本地化的问题。为了解决这个问题，最好的方式当然是采用继承的方法来实现日期时间选择字段了。而本文就是用来讲述如何通过继承来实现这个的。
EXTJS 6 日期组件 日期时间组件（Y-m-d H:i:s）
seasidexin的专栏
05-06 2659
我想要个这样的 带有时分秒的（xtype : 'datetimefield'） 但是现实是这样的。。。。（xtype : 'datefield'） 默认extjs6 是不支持datefield 的， 想要实现上述效果需要改造一下ext-all-debug.js 需要在ext-all-debug.js的最后追加一部分（新增部分） 引用方式： ...
extjs 下拉日期_extjs的日期时间空间datetimefiled
weixin_39903538的博客
01-17 196
/*** 此控件支持Ext3.2及以上版本* 用法与Ext.form.DateField一样* 例如：var startDt = new Ext.ux.DateTimeField({fieldLabel:'开始时间',name:'startTm'});*/Ext.ux.DateTimeField = Ext.extend(Ext.form.DateField, {width:145,format:...
EXTJS日期时间选择控件（精确到秒）
hwak的专栏
10-11 439
一。一些废话 近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅可以选择时间的控件，由于EXTJS版本差异较大，利用官方3.2的Demo制作了一个可以选择到秒的时间控件，该控件只能够用于ExtJs2.2以上的版本。经过测试ExtJs2.02版本不适用该控件，如果你还在使用2.02这个版本或者更老，请绕道。废话不说了，看代码： 二。文件明细： Spinner.js...
extjs4.2 datetime控件
05-21
在ExtJS 4.2版本中，开发者可以使用DateTime控件来处理日期和时间的选择与显示，这尤其适用于需要精确到时分秒的场景。这个控件是ExtJS对基础日期选择器的扩展，增加了对时间部分的细致控制。 DateTime控件在ExtJS ...
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能
03-06
在ExtJs4.2表单控件里分别有个时间控件（datafield）和时间控件(timefield)，但是官方提供的控件不能将日期和时分秒整合到一起，我从网上搜集整理了一个可用的选择日期时分秒的拓展控件，extjs版本是4.2，亲测能用，...
EXTjs4.2中文版
12-01
在文档方面，"脚本娃娃 (Ext4.1.0 Doc中文版 V1.0.0 Beta)"这个文件很可能是EXTjs4.1版本的中文文档，虽然不是4.2版本的，但依然可以为EXTjs4.2的学习提供基础参考。EXTjs的官方文档通常详细介绍了每个类、方法、...
真正的Extjs 4.2 支持时间选择的日历扩展
04-19
在标题提到的"真正的Extjs 4.2 支持时间选择的日历扩展"中，我们关注的是一个特定的日历组件，它增强了ExtJS 4.2的基本功能，添加了对时间选择的支持。这意味着用户不仅可以选择日期，还可以选择具体的时间，这在...
ExtJs4.2实战项目
06-13
整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术: ...2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的实现
Ext.ux.touch.DateTimePicker:扩展 Ext.Picker 以提供 DateTime 功能的 Sencha Touch 插件
06-18
Ext.ux.touch.DateTimePicker 该扩展通过扩展 Ext.Picker 为 Sencha Touch 框架提供了一个 DateTimePicker。 用法 datetimePicker = new Ext.ux.touch.DateTimePicker({ useTitles: true, id: 'dt', value: { day: 23, month: 2, year: 2000, hour: 13, minute: 45 }, listeners: { "hide": function(picker) { window.alert((picker.getValue())); }
ExtJS日期时间选择控件示例
08-23
ExtJS日期时间控件。详细信息参照我的博文： http://blog.csdn.net/lvye1221/article/details/10225941 这是我在 apache 目录下部署了测试示例。将附件中的测试用例，按照以下方式部署好，即可成功访问： apache 根目录包含： extjs 4.0.7 的文件夹，再新建一个测试用的文件夹 test-form, 根目录的目录列表如下所示： ext-4.0.7-gpl test-form/ test-form 文件夹里的列表如下所示，即为解压后的测试示例代码。 test-container.html zhiyuan/ 部署成功后，访问地址为： http://localhost/test-form/test-container.html
extjs4.*完美时间日期控件，可选时分秒
11-19
网上找了一些，不是运行不了，就是代码繁多复杂。所以自己试着写了一个扩展的时间日期控件，可选时分秒，包含项目源代码，下载可直接运行·
extjs4.2日历时间控件
07-04
根据extjs4.2的日历控件，扩充日历时间控件，可以选择日期，时间。经过多次测试效果良好。已经用在项目中了。
EXT js 4带时间的日期控件
07-19
EXT4.X带有时间的日期控件，本人花了很多时间，自己亲自使用的。感觉效果不错。有需要的朋友。可以下载来使用。我下载了很多别人写的。但是都没有使用成功。
ExtJs日期时间选择控件（精确到秒）
xul2009的专栏
09-21 1203
一。一些废话 近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅可以选择时间的控件，由于EXTJS版本差异较大，利用官方3.2的Demo制作了一个可以选择到秒的时间控件，该控件只能够用于ExtJs2.2以上的版本。经过测试ExtJs2.02版本不适用该控件，如果你还在使用2.02这个版本或者更老，请绕道。废话不说了，看代码： 二。文件明细： Spinner.js
令人头痛的ExtJS日期时间控件
热门推荐
lvye1221的专栏
08-23 1万+
1 缘由 Ext提供了日期、时间的控件，但没有将日期和时间组合在一起的控件。在网上搜索时，有前辈创建或重写了时间相关的类，并提供了源码。不得不说那位作者对 extjs 框架理解得很透彻，虽然不知道他当时是怎样研究的，但不得不服啊。 之前网上提供的代码，我没有详细研究重写的实现方法。但我不太赞成之前的路径组织或者架构的实现方式。因为要使用这个起始结束时间控件，需要在一个页面中包含好几个js文件
Extjs实现年月日时分秒格式的时间选择器
互联网
04-27 654
Extjs 实现年月日时分秒的时间选择器，实现方式也是继承现有类，进一步封装一下自己的功能。 js代码如下： /*-----------'Y-m-d H:m:s' format section--------------*/ Ext.ns('Ext.ux.form'); Ext.ux.form.TimePickerField = function(config){ Ext....
ExtJS4.2带时分秒的日期控件扩展实现
"EXTJS4.2的日期时间控件扩展，包括年月日时分秒选择功能" 在EXTJS框架中，开发人员经常需要处理日期和时间的输入，特别是需要精确到小时、分钟和秒的情况。EXTJS4.2提供了一个日期控件扩展，专门针对这种需求进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值