`
wangmengbk
  • 浏览: 291927 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext.menu.Menu(菜单)

    博客分类:
  • Ext
阅读更多
以下是一个静态的菜单,可供参考!如有做的不好的,可以留言相告!共同交流!

代码如下:

新建一个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="styles.css">

       -->

       <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>


====运行效果查看附件====
  • 大小: 40.5 KB
分享到:
评论

相关推荐

    ext.ux.menu.storemenu.zip

    总结起来,`ext.ux.menu.storemenu.zip` 提供了一个基于 ExtJS 的动态菜单解决方案,它利用了数据存储的功能来创建可扩展和动态的菜单系统。这个组件对于那些需要根据用户角色、权限或动态数据来构建菜单的 Web 应用...

    Ext.js教程和Ext.js API

    6. **菜单和工具栏**:创建和使用菜单(Menu)和工具栏(Toolbar)。 7. **拖放(Drag & Drop)和DND**:如何实现元素的拖放操作。 8. **Ajax和数据通信**:使用Ajax请求进行后台通信,包括JsonP和ScriptTagProxy。 ...

    ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree

    4. **右键菜单**:实现右键菜单(Ext.menu.Menu),定义菜单项,绑定点击事件处理函数。 5. **事件监听**:监听TreePanel的`contextmenu`事件,当用户右键点击节点时触发,显示右键菜单。 6. **数据库操作**:在...

    Ext3.X横向菜单导航栏

    总的来说,创建Ext3.X的横向菜单导航栏需要理解`Ext.menu.Menu`和`Ext.menu.Item`的用法,结合JSON数据动态生成菜单,并正确引用库文件和样式文件。通过这样的方法,我们可以构建出功能丰富、易于使用的Web应用程序...

    Ext.plugins.TDGi.tabScrollerMenu插件的使用

    这个文件通常会引入必要的Ext JS库,如`ext-all.js`或`ext-debug.js`,以及`tabScrollerMenu.css`和`tabmenu.gif`等资源文件。`tabScrollerMenu.css`用于设置插件的样式,确保其与页面的其他元素协调一致,而`tab...

    ExtJSWeb应用程序开发指南(第2版)

    3.4.5 认识Ext.menu.Menu菜单 3.4.6 最简单的菜单栏 3.4.7 创建二级或多级菜单 3.4.8 将更多组件加入菜单 3.4.9 具有选择框的菜单 3.5 本章小结 第4章 最常用的表单 4.1 表单及表单元素 4.1.1 了解Ext.form...

    Ext 中的Tree实现不同节点不同的右键菜单

    menu = Ext.create('Ext.menu.Menu', { items: [{ text: '打开', handler: function() { console.log('打开文件夹:', record.data.text); } }, { text: '重命名', handler: function() { console.log('...

    ext 下拉菜单。(不要下,不能用)

    在EXT JS库中,下拉菜单(Dropdown Menu)是一种常见的组件,用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的UI组件和数据绑定机制。然而,从标题...

    extjs菜单的开发

    通过熟练掌握`Ext.Toolbar`、`Ext.menu.Menu`、`Ext.menu.Item`、`Ext.menu.CheckItem`、`Ext.menu.DateMenu`和`Ext.menu.ColorItem`等类的用法,开发者可以轻松创建出符合用户需求的Web应用菜单。在实际开发中,...

    关于extjs ext.tree

    - `Ext.menu.Menu`可以与`itemcontextmenu`事件结合,创建节点的右键菜单。 - `Ext.selection.TreeModel`提供了树形选择行为,支持单选或多选。 总之,`ext.tree`是ExtJS库中一个强大且灵活的组件,通过配置和...

    Ext.js(YuiGrid的学习)

    它的核心组件包括窗口(Window)、面板(Panel)、表格(Grid)、菜单(Menu)、表单(Form)等,可以构建出复杂的Web应用界面。 YuiGrid作为EXT.js中的表格组件,主要用于显示和操作数据。以下是YuiGrid的一些关键...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    Ext级联菜单实例

    阅读《Ext级联菜单.docx》文档可能会提供更多关于如何配置和定制ExtJS级联菜单的细节,包括但不限于样式调整、动态加载子菜单、自定义事件处理等。对于初学者来说,理解和掌握这些基本概念是至关重要的,因为它们将...

    EXTJS4 菜单栏

    2. **创建菜单**:然后,使用`Ext.create`或`new Ext.menu.Menu`创建菜单对象,并将之前创建的菜单项添加到其中。 ```javascript var menu = Ext.create('Ext.menu.Menu', { items: [item1, item2, ...] // 添加多...

    ExtJS-3.4.0系列目录

    Ext.menu.Menu允许你创建可定制的多级菜单,可与工具栏中的按钮关联,实现点击后展开菜单的效果。 4. **表单(Form)** - **表单面板(Ext.form.Panel)**:是表单的基础容器,可以包含多个表单字段和布局。它管理...

    ExtJs_xtype一览

    - `menu`:`Ext.menu.Menu`,创建下拉菜单。 - `colormenu`:`Ext.menu.ColorMenu`,颜色选择菜单。 - `datemenu`:`Ext.menu.DateMenu`,日期选择菜单项。 - `menuitem`:`Ext.menu.Item`,菜单的基本项。 - `...

    Packtpub.Ext.JS.3.0.Cookbook.Oct.2009

    2. **组件库**:详细讲解各种UI组件,如面板(Panel)、表格(Grid)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等,以及如何自定义和组合这些组件。 3. **数据绑定**:阐述如何使用Store和Model进行数据管理...

    ExtJs组件类的对应表

    1. **`menu`** - `Ext.menu.Menu`,菜单组件,用于创建上下文菜单或下拉菜单。 2. **`colormenu`** - `Ext.menu.ColorMenu`,颜色选择菜单,用于从预设的颜色中选择。 3. **`datemenu`** - `Ext.menu.DateMenu`...

Global site tag (gtag.js) - Google Analytics