`
jobar
  • 浏览: 346908 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs4中给Grid增加右键菜单功能

 
阅读更多
1 首先定义右键时所要显示菜单组件
Ext.define('Qui.view.MonitoringMenu', {
    extend: 'Ext.menu.Menu',
    alias: 'widget.MonitoringMenu',

    requires: [
        'Ext.menu.Item'
    ],

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
					...
					},
                    text: 'Cancel job'
                },
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
					...

                    },
                    text: 'Cancel job group'
                },
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
                        ...
                    },
                    text: 'Run now'
                }
            ]
        });

        me.callParent(arguments);
    },

    callback: function() {
       ...
    },

    onDlgClose: function(comp,opts) {
        ...
    }

});

2 在Grid上增加监听事件:itemcontextmenu
"#monitoringJogGridView": {
                itemcontextmenu: this.onMonitoringJogGridViewItemContextMenu
            }


3 实现监听事件
var me = this;
e.stopEvent();
if (me.menu === undefined){
    me.menu = Ext.widget('MonitoringMenu');
}
dataview.select(index);
me.menu.showAt(e.getXY());
return false;


4 效果:


  • 大小: 9.2 KB
分享到:
评论

相关推荐

    ExtJs grid行 右键菜单的两种方法

    在ExtJs中,创建一个Grid并为其添加右键菜单是常见的需求,特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能,允许用户在点击网格行时显示自定义...

    基于FineUI Grid控件添加右键菜单

    在本文中,我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库,它基于ExtJS库,并提供了丰富的UI组件和便捷的API,使得开发者能够快速构建交互式的企业级Web应用。 ...

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...

    extjs表格Grid比较全面的功能

    开发者可以使用事件监听和插件机制,为Grid添加自定义行为,如右键菜单、双击事件等。 15. **响应式设计(Responsive Design)** Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。...

    extjs3.0 组件

    再来看看EXTJS 3.0 的右键菜单(Context Menu)功能。在Web应用中,右键菜单通常用于提供额外的操作选项。EXTJS 提供了简单易用的API来创建和管理右键菜单,可以轻松地将其与任何组件关联,如表格、树形视图等。这为...

    ExtJs_grid.txt

    除了基本的显示和交互外,ExtJs Grid还支持多种自定义功能,如添加行号、复选框选择模型、右键菜单等。这些功能的实现通常需要通过扩展`ColumnModel`和监听特定的Grid事件来完成。 以上是对ExtJs Grid组件的详细...

    ssh+extjs4.0grid删除数据

    2. **定义删除行为**:为Grid添加一个删除按钮或右键菜单,绑定删除操作。在触发删除事件时,获取选中的行或记录ID。 3. **发送删除请求**:利用Ext.Ajax或Ext.data.Store的`remove`方法,传入要删除的记录,然后...

    ExtJs DataGridView控件实例

    4. **排序功能**:Grid中的每一列都支持排序,用户可以通过点击列头来改变数据的排序方式,这通常通过调用Store的sort方法来实现。 5. **分页**:对于大数据集,分页是必不可少的。ExtJs Grid可以通过配置 ...

    Extjs中文api

    8. **菜单(Menus)**: 菜单组件提供下拉菜单和右键菜单,可自定义菜单项和快捷键。 9. **工具栏(Toolbars)**: 工具栏常用于放置按钮、分割线、下拉框等工具,可以放在窗口、面板等组件的顶部或底部。 10. **...

    EXTJS扩展例子集

    2. **行为扩展**:这些扩展可能提供新的用户交互模式,例如拖放功能、右键菜单等。 3. **工具类**:可能包含一些实用的函数,用于处理数据、DOM操作或者优化性能。 4. **主题**:EXTJS支持主题定制,开发者可以...

    深入浅出ExtJS第2版

    3.15 Grid与右键菜单 73 3.16 本章小结 74 第4章 表单与输入控件 76 4.1 制作一个表单 76 4.2 FormPanel和BasicForm详解 77 4.3 EXT支持的控件 77 4.3.1 控件继承图 77 4.3.2 表单控件 78 4.3.3 基本输入控

    ExtJSgrid组件,分页展示全功能

    ExtJS Grid组件是ExtJS库中的一个核心组件,用于创建数据密集型的表格视图,非常适合展示大量结构化的数据。在“ExtJSgrid组件,分页展示全功能”这一主题中,我们将深入探讨如何利用ExtJS实现高效且功能丰富的分页...

    精通JS脚本之ExtJS框架.part2.rar

    10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4...

    extjs入门教程实例

    在ExtJS中,可以通过开启行编辑插件(`Ext.grid.plugin.RowEditing`)实现这一功能。当用户完成编辑并保存时,数据会通过数据源的`update`方法发送到服务器。 4. **删除(Delete)**: 删除记录通常通过选中网格中的...

    extjs demo程序

    TabCloseMenu.js可能定义了一个自定义的菜单,当用户右键点击选项卡时出现,允许用户关闭当前或多个选项卡,提供更灵活的用户交互体验。 4. **branch12**: 这看起来可能是代码仓库中的一个分支名,可能代表了这个...

    精通JS脚本之ExtJS框架.part1.rar

    10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4...

    汇总Extjs中GridPanel的各个属性与方法.doc.pdf

    7. **enableHdMenu**: 是否启用列头的右键菜单,允许用户对列进行操作,如隐藏或排序。 8. **enableColumnHide**: 用户是否可以通过标题菜单隐藏列。 9. **loadMask**: 数据加载时是否显示遮罩层,提供用户体验。 ...

Global site tag (gtag.js) - Google Analytics