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

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

全部的代码如下,其中的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.     Ext.QuickTips.init();

  12.     // Menus can be prebuilt and passed by reference
  13.     var dateMenu = new Ext.menu.DateMenu({
  14.         handler : function(dp, date){
  15.             Ext.MessageBox.alert('Date Selected '+date);
  16.         }
  17.     });
  18.     var menu = new Ext.menu.Menu({
  19.         id: 'mainMenu',
  20.         items: [
  21.             {
  22.                 text: '选择日期',
  23.                 iconCls: 'calendar',
  24.                 menu: dateMenu // <-- submenu by reference
  25.             }
  26.         ]
  27.     });
  28.     var tb = new Ext.Toolbar();
  29.     tb.render('toolbar');

  30.     tb.add({
  31.             text:'工具菜单',
  32.             iconCls: 'bmenu',  // <-- icon
  33.             menu: menu  // assign menu by instance
  34.     });
  35. });

  36. </script>
  37. <style type="text/css">
  38. #container {
  39.     width:600px;
  40.     height:300px;
  41.     border:3px solid #c3daf9;
  42. }

  43. .calendar {
  44.     background-image:url(../../resources/images/default/shared/calendar.gif) !important;
  45. }

  46. .blist {
  47.     background-image: url(list-items.gif) !important;
  48. }

  49. .bmenu {
  50.     background-image: url(menu-show.gif) !important;
  51. }

  52. .menu-title{
  53.     background: #ebeadb url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x;
  54.     border-bottom:1px solid #99bbe8;
  55.     color:#15428b;
  56.     font:bold 10px tahoma,arial,verdana,sans-serif;
  57.     display:block;
  58.     padding:3px;
  59. }
  60. </style>

  61. </head>
  62. <body>
  63. <div id="container">
  64.     <div id="toolbar"></div>
  65. </div>
  66. </body>
  67. </html>
http://www.java2000.net/p8556




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

你可能感兴趣的:(JavaScript,html,.net,css,ext)