Ext帶時間選擇的日期控件

時間 2019-12-21

標籤 ext 時間選擇日期控件简体版

原文原文鏈接

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

別人已經作好了，css

示例用法：html

<!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>

效果以下：java

可是有個問題：函數

這裏alert出來的值是js的Date類型，這個類型不是個省油的，因此本人在DateTimeField.js增長了一個函數測試

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

若是這裏是用法：ui

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

那麼alert出來的就是String類型的this

另外，本人有個需求，就須要getValue這個方法拿到的就是String這個值，怎麼辦？因而本人研究了一下，搞出來了，方法以下，須要在DateTimeField.js改3處：spa

1.改getValue方法以下：code

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個地方修改。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。