`
chengyue2007
  • 浏览: 1481747 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

extjs 创建简单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);//创建动态树  

 

分享到:
评论

相关推荐

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在EXTJS开发中,TreePanel是用于展示层级结构数据的组件,它经常被用来构建文件系统或者组织结构等。在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    Extjs入门教程(treePanel和GridPanel)

    在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...

    extjs TreePanel

    通过这些配置项和方法,开发者可以构建动态、交互性强的EXTJS TreePanel,实现数据的加载、节点的操作和用户交互。例如,可以设置`rootVisible`为`false`隐藏根节点,使用`loader`配置项定制数据加载逻辑,通过`...

    ExtJS4 treepanel与girdpanel简单案例(包括MVC模式与非MVC模式)

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    ExtJs在struts2.0.x下实现动态树的解决方案

    在前端,使用ExtJs创建TreePanel,并配置它的store指向Struts2 Action的URL,以获取动态数据。例如: ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '/...

    ExtJS 自定义树组件 节点的操作 搜索 右键菜单

    功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    无废话ExtJs 系列教程十五[树:TreePanel]

    通过学习这个系列教程,你将掌握如何创建、配置和操作TreePanel,从而在你的应用程序中有效地利用这种强大的组件。对于深入理解ExtJs的使用和开发,掌握TreePanel的知识至关重要。同时,结合源码学习可以帮助你更好...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    解决EXTJS4.2的tabpanel右键关闭的BUG

    EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    在JavaScript的ExtJS框架中,TreePanel是一种强大的组件,它用于展示树形结构的数据,尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据,这在很多应用场景中,如文件系统、组织结构或者...

    Extjs2.x 实现文件上传组件

    在ExtJS 2.x版本中,实现文件上传组件是一项常见的需求,它允许用户在Web应用中选择并上传本地文件到服务器。在本文中,我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先,我们需要理解ExtJS中的FormPanel组件...

    ExtJS+2.2实现及应用连载.rar

    在2.2版本中,ExtJS提供了丰富的组件库、强大的数据管理机制以及优雅的用户界面设计,使得开发者能够轻松创建复杂的桌面级Web应用。本资料“ExtJS+2.2实现及应用连载”旨在深入探讨这一版本的特性和实际应用。 一、...

Global site tag (gtag.js) - Google Analytics