[ExtJS4] TreePanel 取消默认双击事件行为:展开折叠菜单
想单击展开菜单的效果与默认双击事件重复, 导致点击过快时, 出现重复菜单项.
为避免此问题且得到更好的用户体验, 需要取消TreePanel 默认双击事件行为.
treepanel.on('itemclick', function(treeview, record, item, index, e, opts) {
/** 取消双击展开折叠菜单行为 */
treeview.toggleOnDblClick = false;
if (record.get('leaf')) {
var moduleId = record.get('id');
application.loadModule(moduleId);
var module = application.getController(moduleId);
/**
* @tip
* 一个控制器第一个视图为模块主功能视图
*/
var viewName = module.views[0];
var view = module.getView(viewName);
/***
* 视图结构: 目录为模块包名, 目录内文件为模块名, 视图类型为小写的模块名.
* @example
* App.viw.theme.Theme
* alias : 'widget.theme'
*
* viewType: theme
*/
var viewType = viewName.split('.')[1].toLowerCase();
/**
* 如果没有此视图, 创建视图.
*/
if (!tabpanel.down(viewType)) {
var panel = view.create();
tabpanel.add(panel);
tabpanel.setActiveTab(panel);
panel.doLayout();
}
/**
* 如果有此视图, 刷新视图.
*/
else {
var panel = tabpanel.down(viewType);
tabpanel.setActiveTab(panel);
panel.doLayout();
}
} else {
treeview.toggle(record);
}
});
分享到:
相关推荐
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
首先需要了解的是,ExtJS 4中的TreePanel组件可以通过CSS和JavaScript自定义样式和行为。在我们的示例中,我们将展示如何通过CSS的line-height属性动态调整TreePanel中行的高度。line-height属性可以控制元素内文本...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
1. **ExtJS TreePanel**:TreePanel 是ExtJS中用来展示层级数据的组件,类似于HTML中的树状结构。在这个例子中,它被用来显示具有层级关系的数据,如目录结构或组织架构。用户可以通过点击节点来展开或折叠子节点,...
EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...
在教程中,你可能会学到如何创建和配置TreePanel,包括加载数据、设置节点图标、处理节点的展开和折叠事件,以及添加拖放功能。TreePanel通常用于展现文件系统、组织架构或层级关系的数据。 GridPanel则是ExtJS中的...
为了响应用户的交互行为,ExtJS提供了丰富的事件监听机制。例如,在本例中使用的“checkchange”事件,当节点的选中状态发生变化时触发。 ### 三、获取所有被选中的叶子节点的ID 根据题目描述,我们的目标是从...
在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
4. **配置与布局**:EXTJS4提供了丰富的配置选项来定制菜单栏的外观和行为,如`width`、`floating`(是否浮动)、`plain`(无边框样式)等。同时,菜单栏支持自动调整大小和位置,以适应不同的屏幕尺寸和布局。 5. ...
在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...
9. **取消树的双击展开**:`Extjs tree取消双击展开.txt`可能讨论如何禁用树节点的默认双击展开行为,允许开发者自定义用户交互,比如通过点击按钮或使用其他事件来控制节点的展开和折叠。 以上只是基于文件名的...
根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...
这篇博客文章“extjs4 导航菜单实例”将深入探讨如何在ExtJS 4中创建和使用导航菜单,这对于构建具有层次结构和动态功能的用户界面至关重要。 在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出...
7. **expandOnDblClick**: 是否在双击节点时展开或折叠。 8. **singleExpand**: 是否允许一次仅展开一个父节点。 9. **loadMask**: 是否在加载数据时显示遮罩层,提供更好的用户体验。 TreePanel还支持多种事件,...