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

Question

我正在尝试自定义 ExtJS 的分组摘要网格。到目前为止，我已经实现了 Grid 的 UI 部分。我陷入了一个小问题，我必须从网格中隐藏详细信息行，以便它只显示摘要行。

我想在不使用商店过滤器的情况下实现此目的，因为它会影响我的组汇总总计。请建议带有 javascript display:'none' 功能的东西。

请跟随我的小提琴：GroupSummaryGrid

Answer 1

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

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

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

代码片段

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