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

java2000.net

浏览: 651146 次
性别:
来自: 天津

最近访客更多访客>>

kingkwj

Higher

sing9123

Mr_冰凉

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT JavaScript CSS HTML .net

最近用到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

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

分享到：