`

ExtJs菜单Menu

阅读更多

创建简单Meun,实现在TreePanel上面右键.

/**
   创建简单Menu
 */
function createMenu(){
    //创建一个菜单
    var myMenu = new Ext.menu.Menu({
        items:[{
            text: '右键快捷方式1',
            menu: [{
                text: '右键子菜单1'
            },{
                text: '右键子菜单2'
            }]
        },{
            text: '右键快捷方式2'
        }]
    }) ;
    
    //因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
    var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
    var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
    var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
    vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
    vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
    
    var obj = {
        title: '我的Menu练习',
        renderTo: document.body,
        height: 300,
        width: 600,
        root: vRoot,
        tbar:[{
            text: '文件',
            menu: {items:[{
                text: '打开',
                icon: '../images/open.gif'
            },{
                text: '保存',
                icon: '../images/save.gif'
            },'-',{
                text: '另存为...',
                handler: function(b){
                    var win = new Ext.Window({
                        title: '另存为对话框',
                        width: 200,
                        height: 200,
                        html: '可以在此处进行其他操作'
                    });
                    win.show() ;
                }
            }]}
        },'-',{//在两个按钮之间添加一条分隔线
            text: '编辑'
        },'->',{//右顶格显示'帮助'按钮
            text: '帮助'
        }],
        listeners: {//添加监听器,实现右键Tree显示定义菜单myMenu
            contextmenu: function(n,e){
                myMenu.showAt(e.getXY()) ;
            }
        }
    };
    var myPanel = new Ext.tree.TreePanel(obj) ;
}
Ext.onReady(createMenu);//创建动态树
 
1
1
分享到:
评论
2 楼 ysj5125094 2013-07-15  
xutao1989103 写道
[list]
[*]
引用
引用
引用
[u][i][i][b][i]
引用
[list]
[*][*][img][url][url][url][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][url][img][/img][/url][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/url][/url][/url][/img]
[*][/list][/i][/b][/i][/i][/u]
[/list]
||||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
||||||||||||||||||||||
||||||||||||||||||||||
|||||||||||||||||||||
|||||||||||||||||||||
||||||||||||||||||||
||||||||||||||||||||
|||||||||||||||||||
|||||||||||||||||||
||||||||||||||||||
||||||||||||||||||
|||||||||||||||||
|||||||||||||||||
||||||||||||||||
||||||||||||||||
|||||||||||||||
|||||||||||||||
||||||||||||||
||||||||||||||
|||||||||||||
|||||||||||||
||||||||||||
||||||||||||
|||||||||||
|||||||||||
||||||||||
||||||||||
|||||||||
|||||||||
||||||||
||||||||
|||||||
|||||||
||||||
||||||
|||||
|||||
||||
||||
|||
|||
||
||
|
|
             

这是什么东西?
1 楼 xutao1989103 2013-07-12  
[list]
[*]
引用
引用
引用
[u][i][i][b][i]
引用
[list]
[*][*][img][url][url][url][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][url][img][/img][/url][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/flash][/url][/url][/url][/img]
[*][/list][/i][/b][/i][/i][/u]
[/list]
||||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
||||||||||||||||||||||
||||||||||||||||||||||
|||||||||||||||||||||
|||||||||||||||||||||
||||||||||||||||||||
||||||||||||||||||||
|||||||||||||||||||
|||||||||||||||||||
||||||||||||||||||
||||||||||||||||||
|||||||||||||||||
|||||||||||||||||
||||||||||||||||
||||||||||||||||
|||||||||||||||
|||||||||||||||
||||||||||||||
||||||||||||||
|||||||||||||
|||||||||||||
||||||||||||
||||||||||||
|||||||||||
|||||||||||
||||||||||
||||||||||
|||||||||
|||||||||
||||||||
||||||||
|||||||
|||||||
||||||
||||||
|||||
|||||
||||
||||
|||
|||
||
||
|
|
             

相关推荐

    EXTJS4 菜单栏

    菜单栏在EXTJS4中的实现主要基于`Ext.menu.Menu`类。这个类提供了一个容器,可以容纳多个菜单项,每个菜单项可以通过`Ext.menu.Item`或其子类来创建。创建菜单栏的基本步骤包括: 1. **初始化菜单项**:首先,你...

    extjs4 导航菜单实例

    在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出的菜单,可以包含多个子菜单项。创建导航菜单时,我们需要定义菜单项(menu items),每个菜单项可以是简单的链接、复选框、分割线或包含子菜单...

    extjs菜单的开发

    本文将深入探讨EXTJS中的菜单开发,帮助初学者理解如何利用EXTJS的Menu组件创建功能丰富的菜单系统。 EXTJS的Menu组件由多个类构成,它们协同工作以实现各种功能。首先,`Ext.Toolbar`是菜单条类,用于在页面上显示...

    ExtJs菜单导航功能,不在用左边功能树

    "ExtJs菜单导航功能,不在用左边功能树"这一主题,旨在探讨如何在不使用左侧树形结构的情况下,利用ExtJs实现高效且现代感的菜单导航。 ExtJs是一款强大的JavaScript库,专门用于构建富客户端应用。它提供了丰富的...

    extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

    3. **多级菜单**:实现多级菜单结构,需要掌握ExtJS的Menu组件和子菜单(Submenu)的概念。每个菜单项可以关联一个子菜单,形成层次结构。通过监听用户的鼠标悬停事件,动态展开和关闭子菜单。 4. **动态生成**:...

    Extjs动态加载菜单

    动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...

    ExtJS-3.4.0系列目录

    - **菜单栏(Menu)**:提供下拉式菜单,用于放置选项和子菜单。Ext.menu.Menu允许你创建可定制的多级菜单,可与工具栏中的按钮关联,实现点击后展开菜单的效果。 4. **表单(Form)** - **表单面板(Ext.form....

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    EXTJS中的树菜单(TreeMenu)是TreePanel的一个变体,通常用作下拉菜单。它结合了树的层次结构和菜单的功能,用户可以通过选择不同的菜单节点来执行相应的操作。这种设计使得复杂的操作结构变得更加直观和易用。 3....

    ExtJS5树形菜单

    在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...

    Extjs4下的STOREMENU

    在ExtJS 4中,STOREMENU 是一种特定的功能,它将数据存储(Store)与菜单(Menu)相结合,提供了一种动态创建菜单项的方法,这些菜单项可以根据存储的数据进行更新。这种功能在需要根据用户权限或实时数据动态展示...

    menu-dinamico-extjs:动态 ExtJS 菜单

    带有 PHP 的 ExtJS 动态菜单这是使用 PHP 的 ExtJS 动态菜单示例,我的意思是使用 PHP,但它可以用任何后端语言完成。 此存储库包含 Ext 项目 5.1 版的“app”文件夹。 菜单由“menu.php”文件定制。 如下: <?...

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

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

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在ExtJS4.2中,我们可以使用`Ext.menu.Menu`类来创建菜单,并通过监听事件或异步请求来更新菜单内容。例如,我们可以通过以下步骤实现动态菜单: 1. 创建基础菜单结构,定义菜单项。 2. 使用`itemId`或`id`为每个...

    extjs仿桌面系统

    首先,EXTJS的组件库包含了各种各样的UI元素,如窗口(Window)、面板(Panel)、菜单(Menu)、按钮(Button)等,这些都是构建桌面系统的基础。例如,我们可以使用窗口来模拟桌面的快捷方式,面板则可以用来创建...

    ExtJS工具栏

    总结,ExtJS工具栏和菜单系统提供了一种灵活的方式来构建丰富的用户界面,结合按钮、分隔线和多级菜单,可以创建出满足各种需求的交互式Web应用。通过理解这些基本概念和使用方法,开发者可以高效地构建出具有专业...

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    然后,通过阅读教程,逐步学习每个组件的使用方法,例如如何创建窗口(Window)、按钮(Button)、菜单(Menu)等。实践环节非常关键,尝试编写自己的实例,模仿并扩展已有的例子,将理论知识转化为实际技能。最后,...

    Javascript、Css、Html下拉式折叠菜单

    该菜单在网页设计中非常常见,它不仅可以提高用户体验,还能使页面布局更加美观、合理。 #### 二、关键技术点分析 ##### 2.1 HTML结构 HTML是构建网页的基础,本案例中的HTML结构清晰地定义了导航栏的各项元素。...

    extjs6.6框架的web项目(登录+首页)

    5. **首页左菜单**:EXTJS的导航组件,如`Ext.menu.Menu`和`Ext.toolbar.Toolbar`,可以用来创建复杂的导航结构。在本项目中,左侧菜单可能使用了这些组件,提供多级菜单,允许用户在应用的不同部分之间导航。 6. *...

    ExtJs2.0学习系列

    工具栏(Toolbar)和菜单(Menu)在用户界面中起到辅助操作的作用。学习如何创建和定制这些元素,可以提供丰富的交互功能,如按钮、下拉菜单、分隔符等。 八、拖放功能 ExtJS 2.0支持拖放操作,允许用户通过鼠标...

Global site tag (gtag.js) - Google Analytics