1 # 大 中 小 发表于 2008-08-16 11:08:56 


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

运行效果: 

<!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>
2008-08-16_110853.png
快乐渡过每一天，减肥坚持每一天