Question

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

我想在不使用商家过滤器的情况下实现这一点，因为它会影响我的论坛摘要总数。请使用javascript显示提示：＆＃39; none＆＃39;功能。

请关注我的小提琴：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 中，我使用您的代码创建了一个演示并进行了一些修改。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

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

Extjs在渲染网格

1 个答案: