如何删除EXTJS中特定行的汇总分组

Posted 2023-02-26

【中文标题】如何删除EXTJS中特定行的汇总分组

【英文标题】：How to remove the summary grouping of particular row in EXTJS

【发布时间】：2014-12-30 02:05:59

【问题描述】：

如果我在网格中应用 groupField 属性并存储，extjs 会自动按 groupField 对记录进行排序。

例如：http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-summary-grid.html，它使用 'project' 作为 groupField。

我的问题是如何将不属于任何组的额外行添加到带有 groupField 的网格中。 （像这样：http://i59.tinypic.com/30s973l.jpg）

【参考方案1】：

默认为groupField 中的每个值创建组，也为空的groupField 创建组（但它首先出现）。如果这对您来说足够了，那么您无需做任何事情。

小提琴：http://jsfiddle.net/tme462tj/

如果您希望在附加图像上具有类似的行为，则必须完成一些工作。 要将空值放在末尾，您可以为模型字段创建convert 函数（例如：convert: function(v) return v ? v : defaultDepartment; ）。如果要隐藏此空组的标题和摘要，可以将事件侦听器附加到 viewready 事件并使用样式隐藏它们：

viewready: function() 
    var els = this.getEl().query('.x-grid-group-hd');
    els = Ext.Array.filter(els, function(e)  return e.textContent.trim() == defaultDepartment; );

    if (els.length !== 1) 
        return;
    
    var header = Ext.fly(els[0]);
    header.setStyle('display', 'none');

    var summary = header.up('.x-group-hd-container').down('.x-grid-row-summary');
    if (summary) 
        summary.setStyle('display', 'none');
    

小提琴：http://jsfiddle.net/hdyokgnx/1/

【讨论】：

非常感谢，您的回答给了我更清晰的方向！但是一旦我折叠其他摘要组，就会显示默认的。

正如 user3711105 指出的那样，接受的解决方案一直有效，直到其他组折叠为止。但是，如果您在成功加载网格后立即运行此代码，则该解决方案可以正常工作。

【参考方案2】：

根据我对已接受解决方案的评论，此修订使分组标题在该网格视图期间永久隐藏。

这解决了我需要一个分组网格但一个组没有组标题行的问题。

store.load
(
    params      :
    
         arg1   : 1
        ,arg2   : '2'
    

    ,callback   : function( records, operation, success )
    
        var els = me.theGrid.getEl().query('.x-grid-group-hd');
        els = Ext.Array.filter( els, function(e)
        
            return e.textContent.trim().includes( "*** A SUBSTRING IN GROUPING FIELD ***" );
        );


        if (els.length !== 1)
        
            return;
        

        var header = Ext.fly(els[0]);
        header.setStyle('display', 'none');

        var summary = header.up('.x-group-hd-container').down('.x-grid-row-summary');
        if (summary)
        
            summary.setStyle('display', 'none');
        
    
);