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

Posted 周五, 07/04/2008 - 00:35 by admin

官方的例子有介绍如何将DateField添加到FormPanel中。
但有很多时候我们就只是想用漂亮的ExtJs的日期控件，而不想用它的FormPanel.下面例子可以轻松帮你实现。

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

效果图如下:

源代码包括 0001_render_date.html.

0001_render_date.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>直接在页面上显示日期控件</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({
	  name: 'testDate',
	  width: 110,
	  format: 'Y-m-d',
	  emptyText: '请选择日期 ...' 
	 });
	 
	 md.render('divDate'); 
});
</script>
</head>
<body>
<h1>直接在页面上显示日期控件</h1>

<p>这个例子告诉我们如何在页面上绑定日期控件.</p>

<br />

<div id='divDate'></div>
</body>
</html>

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