Ext.menu.Menu(菜单) -

wangmengbk

浏览: 292352 次
性别:
来自: 上海

最近访客更多访客>>

yeming471114363

yonge812

zlbmm007

changfengwuhen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext.menu.Menu(菜单)

博客分类：

EXT Java .net JSP HTML

以下是一个静态的菜单，可供参考!如有做的不好的，可以留言相告！共同交流！

代码如下：

新建一个menu.jsp 代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>菜单栏</title>

    <style type="text/css">

         .blist {

         background-image: url(img/add16.gif)!important;

       }

</style>

       <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">

       

       <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

       <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

       <script type="text/javascript" src="ext/ext-all.js"></script>

</head>

<script type="text/javascript">

Ext.onReady(function(){

Ext.QuickTips.init();

var data=[{name:"java程序员",value:"java程序员"},

{name:"java工程师",value:"java工程师"},

{name:".Net工程师",value:".Net工程师"}];//定义数据

var store=new Ext.data.JsonStore({//读取数据

       data:data,

       fields:["name","value"]

});

var combo=new Ext.form.ComboBox({//定义下拉框

       id:"combo",

       typeAhead:true,

       typeAheadDelay:30,

       width:135,

       emptyText:"请选择",

       //selectOnFocus:true,

       store:store,

       mode:"local",

       triggerAction:"all",

       displayField:"name",

       valueField:"value"



});

//定义选择时间列表

var dateTime=new Ext.menu.DateMenu({

       // 选择后的引用函数

            handler:function(dp,date){

                Ext.MessageBox.alert('日期选择','选择日期为:' + date.format('Y/m/d'),'');

            }

});

var color=new Ext.menu.ColorMenu({

       handler:function(dp,color){

               Ext.MessageBox.alert("颜色选择","选择的颜色为：#"+color);

       }

});

//定义一个菜单栏

var men=new Ext.menu.Menu({

       id:"mainmenu",

       items:[

                       combo,

                       '-',

               {

                       text:"请选择日期",

                       menu:dateTime

               },

               '-',

               {

                       text:"请选择颜色",

                       menu:color

               },

               '-', {

              text: '请选择排列方式',

              menu: {

                  items: [



                      '<b >单选</b>',

                      {

                          text: '列表',

                          checked: true,

                          group: 'theme',

                          checkHandler:onItemCheck

                      }, {

                          text: '大图标',

                          checked: false,

                          group: 'theme',

                          checkHandler:onItemCheck

                      }, {

                          text: '小图标',

                          checked: false,

                          group: 'theme',

                          checkHandler:onItemCheck

                      }, {

                          text: '详细列表',

                          checked: false,

                          group: 'theme',

                          checkHandler:onItemCheck

                      }

                  ]

              }

          }

       ]

});

//申明工具栏

var tb=new Ext.Toolbar({

items:[

       {

               text:"文件",

               menu:men //注入菜单



       },"-",

       {

               xtype:"tbsplit",

               text:"编辑",

               iconCls:"blist",

               menu:new Ext.menu.Menu({

                       items:[

                               {

                                       text:"复制",

                                       handler:onItemCheck

                               },

                               {

                                       text:"粘贴",

                                       handler:onItemCheck

                               },

                               {

                                       text:"删除",

                                       handler:onItemCheck

                               }

                       ]

               })

       }

]



});

tb.addField(combo);//在toolbar中添加下拉框

//定义一个面板

       var panl=new Ext.Panel({

               layout:"form",

               title:"部分菜单",

               width:500,

               height:300,

               renderTo:Ext.getBody(),

               tbar:tb

       });

});

//定义处理事件

function onItemCheck(item, checked){

      Ext.MessageBox.alert("提示", checked ? item.text : 'unchecked');

}

</script>

<body>

</body>

</html>

====运行效果查看附件====