ExtJS 仅在条件下显示 RowExpander

Posted 2023-02-26

【中文标题】ExtJS 仅在条件下显示 RowExpander

【英文标题】：ExtJS display RowExpander on condition only

【发布时间】：2012-02-03 14:46:54

【问题描述】：

我目前有一个相当大的 Grid，并成功地使用 RowExpander 插件在某些行上显示补充信息。我的问题是，并非所有行都包含上述补充信息，如果特定数据存储的条目为空，我不希望 RowExpander 处于活动状态，也不希望显示它的“+”图标。我尝试在 RowExpander 对象上使用传统的“渲染器”属性，但它不起作用。

所以基本上，只有在某个数据存储的字段 != "" 时，您如何才能显示并激活 RowExpander 的图标和双击？

提前致谢！ =)

编辑：我找到了解决方案

正如 e-zinc 所说，部分解决方案（至少对我而言）是提供一个自定义渲染器来检查我的条件字段。这是我的 RowExpander：

this.rowExpander = new Ext.ux.grid.RowExpander(
    tpl: ...
    renderer: function(v, p, record) 
                if (record.get('listeRetourChaqueJour') != "") 
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                 else 
                    p.id = '';
                    return '&#160;';
                
    ,
    expandOnEnter: false,
    expandOnDblClick: false
);

现在，这里的技巧是，对于这个特定的 Grid，我选择不允许 expandOnEnter 和 expanOnDblClick，因为 RowExpander 有时不会被渲染。此外，将包含“+”图标的网格单元的 CSS 类是“x-grid3-td-expander”。这是因为 CSS 类被自动设置为 x-grid3-td-[id-of-column]。因此，通过仅在我不渲染 rowExpander 时将 id 设置为 ''，我还删除了未渲染单元格的灰色背景。所以，没有双击，没有回车，没有图标，没有灰色背景。就好像我的数据存储字段为空的列（当我不想要 RowExpander 时）严格不涉及 RowExpander。

这对我有用。对于希望保留单元格 ID 或希望保持双击并输入事件正常工作的人，除了扩展我猜想的类之外别无他法。希望这可以帮助其他陷入我的位置的人！

【参考方案1】：

正如 e-zinc 所说，部分解决方案（至少对我而言）是提供一个自定义渲染器来检查我的条件字段。这是我的 RowExpander：

this.rowExpander = new Ext.ux.grid.RowExpander(
    tpl: ...
    renderer: function(v, p, record) 
                if (record.get('listeRetourChaqueJour') != "") 
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                 else 
                    p.id = '';
                    return '&#160;';
                
    ,
    expandOnEnter: false,
    expandOnDblClick: false
);

现在，这里的技巧是，对于这个特定的 Grid，我选择不允许 expandOnEnter 和 expandOnDblClick，因为 RowExpander 有时不会被渲染。此外，将包含“+”图标的网格单元的 CSS 类是“x-grid3-td-expander”。这是因为 CSS 类被自动设置为 x-grid3-td-[id-of-column]。因此，仅当我不渲染 rowExpander 时，通过将 id 设置为空字符串，我还删除了不提供任何扩展的单元格的灰色背景。所以，没有双击，没有回车，没有图标，没有灰色背景。对于我的数据存储字段为空的列（当我不想要 RowExpander 时），它真的变得好像严格不涉及 RowExpander。

这对我有用。对于希望保留单元格 ID 或希望保持双击并输入事件正常工作的人，我认为除了扩展 RowExpander 类之外别无他法。当然，也可以使用 Ext.override()，但是 RowExpander 的所有实例都会被覆盖。

【参考方案2】：

我有同样的任务，有我的解决方案

var rowExpander = new Ext.ux.grid.RowExpander(
    renderer : function(v, p, record)
       return record.get('relatedPageCount') > 0 ? '<div class="x-grid3-row-expander">&#160;</div>' : '&#160;';
    
);

我重写了 render 方法，该方法测试存储中的 relatedPageCount 字段并渲染 + 或空白。

【讨论】：

您是使用 Ext.override 还是创建了一个新类并扩展了 RowExpander 插件？我听说使用 Ext.override 会导致您的覆盖函数影响您修改的对象的所有实例，这意味着每个 RowExpander 实例都会受到影响......这不是我想要的。所以我的猜测是在一个新的类中扩展它是要走的路。你最后做了什么？

哦，我知道你在那里做了什么！我使用了和你一样的东西，即 rederer 属性，但 RowExpander 仍然添加了 CSS 类 x-grid3-td-expander，它有一个我不想要的灰色背景。确实提供渲染器确实删除了“+”图标，但它仍然将灰色背景 css 类留给

.

@Jean-Francois Hamelin 我还有 CSS 修复：.x-grid3-td-expander background-image: none !important;

好的...我工作的应用程序很大，我在各个地方都使用 RowExpander，我不希望背景在所有这些地方消失。不过感谢分享，我终于找到了一种解决方法，无需创建新课程并扩展整个事情。

查看原始问题以获得解决方案，将其发布并在 5 小时内将其标记为解决方案（因为我的代表少于 100 个）。

【参考方案3】：

我想我找到了一个更清洁的解决方案。请给我一个反馈 :) 我扩展了 RowExpander 的 toggleRow 方法，如果我匹配一个条件，避免切换行。否则标准流程继续

Ext.create('customplugins.grid.plugin.ClickRowExpander',
        pluginId : 'rowexpander',
        rowBodyTpl : new Ext.XTemplate(
                '<p><b>Last Modified By:</b> usermodify</p>',
                '<p><b>User data:</b> userdata</p>',
                '<p><b>Correlation ID:</b> correlationid</p>',
                '<p><b>Description:</b> descr</p>'
        ),
        toggleRow : function(rowIdx, record) 
            if(record.get('directory')) return false;
            customplugins.grid.plugin.ClickRowExpander.prototype.toggleRow.apply(this, arguments);
        

    )

【参考方案4】：

This version works in Ext JS 5 and 6 (classic)

一件事是移除 +/- 图标，这可以通过 grid viewConfig 来完成：

getRowClass: function (record, rowIndex, rowParams, store) var yourFieldofChoice = record.get('yourFieldofChoice'); if (yourFieldofChoice == null) return 'hide-row-expander'; ,

为 hide-row-expander 定义 css：

.hide-row-expander .x-grid-row-expander visibility: hidden;

现在您禁用在输入键上的扩展（Ext JS 6 不再支持“expandOnEnter”配置）或通过覆盖 toggleRow 双击，或者如果您不希望覆盖创建基于现有插件的自定义行扩展器：

Ext.define('RowExpander', extend: 'Ext.grid.plugin.RowExpander', alias: 'plugin.myExpander', init: function (grid) var me = this; me.grid = grid; me.callParent(arguments); , requiredFields: ['yourFieldofChoice'], hasRequiredFields: function (rec) var valid = false; Ext.each(this.requiredFields, function (field) if (!Ext.isEmpty(rec.get(field))) valid = true; ); return valid; , toggleRow: function (rowIdx, record) var me = this, rec; rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx); if (me.hasRequiredFields(rec)) me.callParent(arguments); );

【参考方案5】：

我已经在 Ext.ux.grid.RowExpander 的监听器中处理了 beforeexpand 事件。 beforeexpand 方法注入了整行数据。有条件地检查数据，我们可以返回真或假。如果我们返回 false 它不会扩展，否则它会做。

var expander = new Ext.ux.grid.RowExpander(
            tpl: '<div class="ux-row-expander"></div>',

            listeners: 

                beforeexpand : function(expander, record, body, rowIndex)

                    var gpdata = record.data.GROUP_VALUES[1].COLUMN_VALUE
                    if(gpdata == null)
                        return false;
                    
                    else
                        return true;
                    
                
            
        );

【讨论】：

这仅用于禁用/启用扩展，而不是完全不显示扩展器图标。