`

[ExtJS4] TreePanel 取消默认双击事件行为:展开折叠菜单

阅读更多
[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节点刷新JS函数

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

    ExtJs GridPanel双击事件获得双击的行

    本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...

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

    《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...

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

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

    ExtJS_TreePanel_树的配置详细属性

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

    extjs4 treepanel动态改变行高度示例

    首先需要了解的是,ExtJS 4中的TreePanel组件可以通过CSS和JavaScript自定义样式和行为。在我们的示例中,我们将展示如何通过CSS的line-height属性动态调整TreePanel中行的高度。line-height属性可以控制元素内文本...

    ExtJS 3.4关于TreePanel的一些实例

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

    Extjs做的treepanel+tab切换页

    1. **ExtJS TreePanel**:TreePanel 是ExtJS中用来展示层级数据的组件,类似于HTML中的树状结构。在这个例子中,它被用来显示具有层级关系的数据,如目录结构或组织架构。用户可以通过点击节点来展开或折叠子节点,...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    Extjs入门教程(treePanel和GridPanel)

    在教程中,你可能会学到如何创建和配置TreePanel,包括加载数据、设置节点图标、处理节点的展开和折叠事件,以及添加拖放功能。TreePanel通常用于展现文件系统、组织架构或层级关系的数据。 GridPanel则是ExtJS中的...

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

    为了响应用户的交互行为,ExtJS提供了丰富的事件监听机制。例如,在本例中使用的“checkchange”事件,当节点的选中状态发生变化时触发。 ### 三、获取所有被选中的叶子节点的ID 根据题目描述,我们的目标是从...

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...

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

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

    EXTJS4 菜单栏

    4. **配置与布局**:EXTJS4提供了丰富的配置选项来定制菜单栏的外观和行为,如`width`、`floating`(是否浮动)、`plain`(无边框样式)等。同时,菜单栏支持自动调整大小和位置,以适应不同的屏幕尺寸和布局。 5. ...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    Extjs4使用要点个人整理

    9. **取消树的双击展开**:`Extjs tree取消双击展开.txt`可能讨论如何禁用树节点的默认双击展开行为,允许开发者自定义用户交互,比如通过点击按钮或使用其他事件来控制节点的展开和折叠。 以上只是基于文件名的...

    extjs4 MVC2 TreePanel动态JSON实现

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

    extjs4 导航菜单实例

    这篇博客文章“extjs4 导航菜单实例”将深入探讨如何在ExtJS 4中创建和使用导航菜单,这对于构建具有层次结构和动态功能的用户界面至关重要。 在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出...

    ExtJs TreePanel应用

    7. **expandOnDblClick**: 是否在双击节点时展开或折叠。 8. **singleExpand**: 是否允许一次仅展开一个父节点。 9. **loadMask**: 是否在加载数据时显示遮罩层,提供更好的用户体验。 TreePanel还支持多种事件,...

Global site tag (gtag.js) - Google Analytics