直接在页面上显示日期控件的方法(2)

Posted 周五, 07/18/2008 - 13:57 by admin

官方的例子有介绍如何将DateField添加到FormPanel中。
但有很多时候我们就只是想用漂亮的ExtJs的日期控件，而不想用它的FormPanel.下面例子可以轻松帮你实现。此方法相比方法一增加了简单初始化日期功能。

演示(demo)地址在文章最后.

效果图如下:

源代码包括 0001_render_date_2.html.

0001_render_date_2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>直接在页面上显示日期控件(2)</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	  var md = new Ext.form.DateField({
	  applyTo : 'txtDate',
	  width: 110,
	  format: 'Y-m-d',
	  emptyText: '请选择日期 ...' 
	 });
});
</script>
</head>
<body>
<h1>直接在页面上显示日期控件(2)</h1>

<p>这个例子告诉我们如何在页面上的文本框(text)绑定日期控件，<br />这样做有个好处是可以很方便给日期始化一个值.</p>

<br />
<input id="txtDate" name="txtDate" type="text" value="2008-05-01">

</body>
</html>

演示地址:http://extjs.org.cn/extjs/mydemo/0001_render_date_2.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

  • 要发表评论，请先登录