EXT2.2 菜单中日期选择的简单例子

最近用到Ext这个东西进行了一些测试，这个例子涉及到了菜单和对应的一个日期选择控件
先看一下效果


全部的代码如下，其中的ext的js请自行去下载。我这里就不提供了。

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" c>
5. <title>Toolbar with Menus</title>
6. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
7. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
8. <script type="text/javascript" src="../ext-all.js"></script>
9. <script type="text/javascript">
10. Ext.onReady(function(){
11. 
    
12.     Ext.QuickTips.init();
13. 
    
14.     // Menus can be prebuilt and passed by reference
15.     var dateMenu = new Ext.menu.DateMenu({
16.         handler : function(dp, date){
17.             Ext.MessageBox.alert('Date Selected '+date);
18.         }
19.     });
20.     var menu = new Ext.menu.Menu({
21.         id: 'mainMenu',
22.         items: [
23.             {
24.                 text: '选择日期',
25.                 iconCls: 'calendar',
26.                 menu: dateMenu // <-- submenu by reference
27.             }
28.         ]
29.     });
30.     var tb = new Ext.Toolbar();
31.     tb.render('toolbar');
32. 
    
33.     tb.add({
34.             text:'工具菜单',
35.             iconCls: 'bmenu',  // <-- icon
36.             menu: menu  // assign menu by instance
37.     });
38. });
39. 
    
40. </script>
41. <style type="text/css">
42. #container {
43.     width:600px;
44.     height:300px;
45.     border:3px solid #c3daf9;
46. }
47. 
    
48. .calendar {
49.     background-image:url(../../resources/images/default/shared/calendar.gif) !important;
50. }
51. 
    
52. .blist {
53.     background-image: url(list-items.gif) !important;
54. }
55. 
    
56. .bmenu {
57.     background-image: url(menu-show.gif) !important;
58. }
59. 
    
60. .menu-title{
61.     background: #ebeadb url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x;
62.     border-bottom:1px solid #99bbe8;
63.     color:#15428b;
64.     font:bold 10px tahoma,arial,verdana,sans-serif;
65.     display:block;
66.     padding:3px;
67. }
68. </style>
69. 
    
70. </head>
71. <body>
72. <div id="container">
73.     <div id="toolbar"></div>
74. </div>
75. </body>
76. </html>

http://www.java2000.net/p8556




<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>