ExtJS 仅根据条件显示 RowExpander

Question

我目前有一个相当大的网格，并且成功地使用 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
});

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

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

Answer 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 ' ';
                }
    },
    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 的所有实例都会受到覆盖的影响。

Answer 2

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

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

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

Answer 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);
        }

    })

Answer 4

此版本适用于 Ext JS 5 和 6（经典）

有一件事是删除 +/ - 图标，可以通过网格 viewConfig 完成：

getRowClass: function (record, rowIndex, rowParams, store) {
var yourFieldofChoice = record.get('yourFieldofChoice');
if (yourFieldofChoice == null) {
返回“隐藏行扩展器”；
}
},

为 hide-row-expander 定义 css：

.hide-row-expander .x-grid-row-expander {
可见性：隐藏；
现在，

您可以通过覆盖toggleRow来禁用回车键上的扩展（Ext JS 6中不再支持'expandOnEnter'配置）或双击，或者如果您不希望覆盖，您可以创建基于现有插件构建的自定义rowexpander :

Ext.define('RowExpander', {
扩展：'Ext.grid.plugin.RowExpander',
别名： 'plugin.myExpander',
初始化：函数（网格）{
var我=这个；
me.grid = 网格；
me.callParent(参数);
},
requiredFields: ['您的选择字段'],
hasRequiredFields: 函数 (rec) {
var 有效=假；
Ext.each(this.requiredFields, 函数(字段) {
if (!Ext.isEmpty(rec.get(field))) {
有效=真；
}
});
返回有效；
},
切换行：函数（rowIdx，记录）{
var me = 这个，rec;
rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) {
me.callParent(参数);
}
}
});

Answer 5

我已经在 Ext.ux.grid.RowExpander 的侦听器中处理了 beforeexpand 事件。 beforeexpand 方法注入了整行数据。有条件地检查数据，我们可以返回 true 或 false。如果我们返回 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;
                    }
                }
            }
        });