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个地方修改。
时间： 2024-11-06 11:17:16