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框架的功能,允许用户在点击网格行时显示自定义...
在本文中,我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库,它基于ExtJS库,并提供了丰富的UI组件和便捷的API,使得开发者能够快速构建交互式的企业级Web应用。 ...
EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...
开发者可以使用事件监听和插件机制,为Grid添加自定义行为,如右键菜单、双击事件等。 15. **响应式设计(Responsive Design)** Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。...
再来看看EXTJS 3.0 的右键菜单(Context Menu)功能。在Web应用中,右键菜单通常用于提供额外的操作选项。EXTJS 提供了简单易用的API来创建和管理右键菜单,可以轻松地将其与任何组件关联,如表格、树形视图等。这为...
除了基本的显示和交互外,ExtJs Grid还支持多种自定义功能,如添加行号、复选框选择模型、右键菜单等。这些功能的实现通常需要通过扩展`ColumnModel`和监听特定的Grid事件来完成。 以上是对ExtJs Grid组件的详细...
2. **定义删除行为**:为Grid添加一个删除按钮或右键菜单,绑定删除操作。在触发删除事件时,获取选中的行或记录ID。 3. **发送删除请求**:利用Ext.Ajax或Ext.data.Store的`remove`方法,传入要删除的记录,然后...
4. **排序功能**:Grid中的每一列都支持排序,用户可以通过点击列头来改变数据的排序方式,这通常通过调用Store的sort方法来实现。 5. **分页**:对于大数据集,分页是必不可少的。ExtJs Grid可以通过配置 ...
8. **菜单(Menus)**: 菜单组件提供下拉菜单和右键菜单,可自定义菜单项和快捷键。 9. **工具栏(Toolbars)**: 工具栏常用于放置按钮、分割线、下拉框等工具,可以放在窗口、面板等组件的顶部或底部。 10. **...
2. **行为扩展**:这些扩展可能提供新的用户交互模式,例如拖放功能、右键菜单等。 3. **工具类**:可能包含一些实用的函数,用于处理数据、DOM操作或者优化性能。 4. **主题**:EXTJS支持主题定制,开发者可以...
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 基本输入控
ExtJS Grid组件是ExtJS库中的一个核心组件,用于创建数据密集型的表格视图,非常适合展示大量结构化的数据。在“ExtJSgrid组件,分页展示全功能”这一主题中,我们将深入探讨如何利用ExtJS实现高效且功能丰富的分页...
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中,可以通过开启行编辑插件(`Ext.grid.plugin.RowEditing`)实现这一功能。当用户完成编辑并保存时,数据会通过数据源的`update`方法发送到服务器。 4. **删除(Delete)**: 删除记录通常通过选中网格中的...
TabCloseMenu.js可能定义了一个自定义的菜单,当用户右键点击选项卡时出现,允许用户关闭当前或多个选项卡,提供更灵活的用户交互体验。 4. **branch12**: 这看起来可能是代码仓库中的一个分支名,可能代表了这个...
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...
7. **enableHdMenu**: 是否启用列头的右键菜单,允许用户对列进行操作,如隐藏或排序。 8. **enableColumnHide**: 用户是否可以通过标题菜单隐藏列。 9. **loadMask**: 数据加载时是否显示遮罩层,提供用户体验。 ...