Ext带时间选择的日期控件

最新推荐文章于 2022-09-26 14:09:47 发布

weixin_34146986

最新推荐文章于 2022-09-26 14:09:47 发布

阅读量1k

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：https://my.oschina.net/u/555061/blog/495264

版权

2019独角兽企业重金招聘Python工程师标准>>>

http://pan.baidu.com/s/1dD997yT

别人已经做好了，

示例用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        
		<link rel="stylesheet" type="text/css"
			href="../lib/ext/resources/css/ext-all.css">
		<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
		<script type="text/javascript" src="../lib/ext/ext-lang-zh_CN.js"></script>
		<!-- ENDLIBS -->
		<link rel="stylesheet" type="text/css" href="Spinner.css"/>
		<script type="text/javascript" src="Spinner.js">
        </script>
		<script type="text/javascript" src="SpinnerField.js">
        </script>
        <script type="text/javascript" src="DateTimeField.js">
        </script>
		<script type="text/javascript">
            Ext.onReady(function(){
				new Ext.Viewport({
					layout:'fit',
					items:{
						tbar:[{
							text: '获取值',
							handler: function(){
							    var v = Ext.getCmp('time').getValue();
							    alert(v);
							}
						},{
							id:'time',
							xtype:'datetimefield',
							format:'H:i'
						}]
					}
				});
            });
        </script>
    </head>
    <body>
    </body>
</html>

效果如下：

但是有个问题：

这里alert出来的值是js的Date类型，这个类型不是个省油的，所以本人在DateTimeField.js增加了一个函数

getValue2: function(){
        return Ext.form.DateField.superclass.getValue.call(this) || '';
    }

如果这里是用法：

var v = Ext.getCmp('time').getValue2();
alert(v);

那么alert出来的就是String类型的

另外，本人有个需求，就需要getValue这个方法拿到的就是String这个值，怎么办？于是本人研究了一下，搞出来了，方法如下，需要在DateTimeField.js改3处：

1.改getValue方法如下：

getValue: function(){
    return Ext.form.DateField.superclass.getValue.call(this) || '';
}

2.增加getValue2方法如下：

getValue2: function(){
    return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
}

3.修改一处:

将

this.menu.picker.setValue(this.getValue() || new Date());

修改为

this.menu.picker.setValue(this.getValue2() || new Date());

另外补充一点，这个例子里所有的文件包括css、图片都是需要用的，而图片的路径是在Spinner.css文件里定义的，所以如果图片放在别处需要改的就是Spinner.css文件。

现在又发现一个问题：

在他给的demo里面测试是没有发现任何问题，但是嵌入到我自己的应用页面里面就成了下面的情况：

时间2个字没对齐
按钮下面有留白问题

解决方法如下：

源程序有这么一段，注意这里有个style: 'width:30'，这里改成36就正常了，还有这里p.getHeight()+31，不要加那个31，于是我把修改好的程序拷贝回到demo里面执行，结果也没有什么不一样，也就说这里如果有发生“变形”就可以考虑在这2个地方修改。

转载于:https://my.oschina.net/u/555061/blog/495264

weixin_34146986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext带时间选择的日期控件

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

Ext带时间选择的日期控件

“相关推荐”对你有帮助么？