Javascript Extjs在网格渲染后显示/隐藏来自分组摘要网格的详细信息行

我正在尝试定制ExtJS的分组摘要网格。到目前为止，我已经实现了网格的UI部分。我被困在一个小东西里，我必须从网格中隐藏细节行，以便它只显示摘要行

我想在不使用商店过滤器的情况下实现这一点，因为这将影响我的组摘要总数。请建议使用javascript显示：“无”功能

请跟着我的小提琴走：

---

为此，您需要使用下面的代码获取所有行

grid.getView().el.query('tr.x-grid-row')// this will return a array all 'x-grid-row'

在得到这个之后，你需要使用循环函数来隐藏所有的行，就像这样

 grid.getView().el.query('tr.x-grid-row').forEach(el => {
     Ext.get(el).setStyle({
         display: 'none',
         height: 0
     });
 })

在本文中，我使用您的代码创建了一个演示，并进行了一些修改。我希望这将有助于/指导您实现您的要求

代码片段

---

多谢了，doHideRowItems方法如预期的那样工作。我想再澄清一下关于崩溃的记录。有什么方法可以折叠/扩展汇总总数的记录吗？？？@SachetPatil我不明白你的问题？好的，我会详细说明我的问题。根据Grid groupingsummary的工作，组包含详细信息行和汇总总数。但在点击特定组后，只有细节行被折叠。我还想折叠汇总。@sachettatil好的，让我试试这个，然后让你知道同样的原因。

Ext.create('Ext.grid.Panel', {
    width: '100%',
    height: 540,
    renderTo: Ext.getBody(),
    features: [{
        groupHeaderTpl: '{name}',
        ftype: 'groupingsummary',
        showSummaryRow: true,
    }],
    listeners: {
        groupclick: function(view, node, group, e, eOpts) {
            this.doHideRowItems();
        },
        afterRender: function(grid) {
            Ext.defer(function() {
                grid.doHideRowItems()
            }, 10);
        }
    },
    store: {
        model: 'TestResult',
        groupField: 'JobNo_JobName',
        data: [{
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Inv',
            EntryDesc: '29',
            Income: 1.82,
            Cost: 0,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Inv',
            EntryDesc: '43',
            Income: 50,
            Cost: 0,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123456',
            JobName: 'New Job',
            JobNo_JobName: '123456 New Job',
            EntryType: 'Pur. Inv',
            EntryDesc: '28 - Supp1',
            Income: 0,
            Cost: 909.09,
            NetProfit: 0
        }, {
            Dummy: '',
            JobNo: '123',
            JobName: 'New Job 2',
            JobNo_JobName: '123 New Job 2',
            EntryType: 'Pur. Inv',
            EntryDesc: '31 - Supp1',
            Income: 0,
            Cost: 909.09,
            NetProfit: 0
        }]
    },
    columns: [{
        dataIndex: 'Dummy',
        flex: 1,
        text: ''
    }, {
        dataIndex: 'EntryType',
        flex: 1,
        text: 'EntryType'
    }, {
        dataIndex: 'EntryDesc',
        flex: 1,
        text: 'EntryDesc'
    }, {
        dataIndex: 'Income',
        flex: 1,
        text: 'Income',
        summaryType: 'sum'
    }, {
        dataIndex: 'Cost',
        flex: 1,
        text: 'Cost',
        summaryType: 'sum'
    }, {
        dataIndex: 'NetProfit',
        flex: 1,
        text: 'NetProfit',
        summaryType: 'sum'
    }],

    doHideRowItems: function() {
        //This function will only hide as you mentioned in Screen shot
        this.getView().el.query('tr.x-grid-row').forEach(el => {
            Ext.get(el).setStyle({
                display: 'none',
                height: 0
            });
        })
    }
});