EXTJS Modern Grid实现双击行展开的功能

最新推荐文章于 2025-09-07 09:27:33 发布

原创最新推荐文章于 2025-09-07 09:27:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXTJS-RwoExpander

EXTJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ExtJS框架中为Grid组件注册双击事件，并实现行的展开与收缩功能。具体步骤包括：首先注册双击事件，然后通过获取选中的单元格和行来切换行的展开状态。

首先给Grid注册一个双击事件

grid.element.on({
            doubletap: 'onGridDoubleTap',
            scope: this
        });

然后是具体的onGridDoubleTap方法

expandedCls: Ext.baseCSSPrefix + 'expanded',
onGridTap: function(event) {
var el = event.getTarget(),
    cell = Ext.Component.fromElement(el),//获取双击选中的单元格
    row = cell.getParent();//获取双击选中的行
row.cells[0].toggleCls(this.expandedCls);//row.cells[0]为选中行的第一列，也就是图标列，后面代码的意思是行展开或收缩时会相应改变图标样式
row.toggleCollapsed();//这是控制行展开或是收缩
},