最近用到Ext这个东西进行了一些测试，这个例子涉及到了菜单和对应的一个日期选择控件
先看一下效果
先看一下效果
全部的代码如下，其中的ext的js请自行去下载。我这里就不提供了。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" c>
- <title>Toolbar with Menus</title>
- <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.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(){
- Ext.QuickTips.init();
- // Menus can be prebuilt and passed by reference
- var dateMenu = new Ext.menu.DateMenu({
- handler : function(dp, date){
- Ext.MessageBox.alert('Date Selected '+date);
- }
- });
- var menu = new Ext.menu.Menu({
- id: 'mainMenu',
- items: [
- {
- text: '选择日期',
- iconCls: 'calendar',
- menu: dateMenu // <-- submenu by reference
- }
- ]
- });
- var tb = new Ext.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'工具菜单',
- iconCls: 'bmenu', // <-- icon
- menu: menu // assign menu by instance
- });
- });
- </script>
- <style type="text/css">
- #container {
- width:600px;
- height:300px;
- border:3px solid #c3daf9;
- }
- .calendar {
- background-image:url(../../resources/images/default/shared/calendar.gif) !important;
- }
- .blist {
- background-image: url(list-items.gif) !important;
- }
- .bmenu {
- background-image: url(menu-show.gif) !important;
- }
- .menu-title{
- background: #ebeadb url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x;
- border-bottom:1px solid #99bbe8;
- color:#15428b;
- font:bold 10px tahoma,arial,verdana,sans-serif;
- display:block;
- padding:3px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="toolbar"></div>
- </div>
- </body>
- </html>
http://www.java2000.net/p8556