logo
down
shadow

How to remove the summary grouping of particular row in EXTJS


How to remove the summary grouping of particular row in EXTJS

By : tony
Date : November 18 2020, 01:01 AM
hop of those help? By default group is made for each value from groupField, also for empty groupField (but it appears first). If it is enough for you then you don't have to do anything.
Fiddle: http://jsfiddle.net/tme462tj/
code :
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');
    }
}


Share : facebook icon twitter icon
Extjs - how can I add subtotal/summary for each Grid Grouping row?

Extjs - how can I add subtotal/summary for each Grid Grouping row?


By : anirudh parmar
Date : March 29 2020, 07:55 AM
wish helps you Never mind, the same example is given for 3.4:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/totals.html
Grouping on a summary

Grouping on a summary


By : Salim Nayakawdi
Date : March 29 2020, 07:55 AM
it helps some times You'll have to implement this on the DB side or via a SQL Command or SQL Expression in CR. For example, something like the following SQL Expression would work:
code :
(select count(item)
from shipment
where shipmentID = "shipment"."shipmentID")
Extjs grid grouping summary click event

Extjs grid grouping summary click event


By : عبدالرحمن السقا
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , As far as I can tell, there's nothing built-in to do that. You will have to catch the click event on the summary element yourself. That remains relatively easy. Things get complicated if you need to know the group of the summary that has been clicked...
You can use the getGroupName method of the feature. For that, you'll need to keep a reference to the grouping feature instance and, the joyful part, you'll have to find the group header element that matches the clicked summary element. To spice things up even a little more, the markup for group and summary elements seems to have changed drastically in Ext 4.2.
code :
function(e, target) {

    // Find group element (header), for the clicked summary
    var groupEl;

    if (Ext.getVersion().isLessThan('4.2')) {
        // Life used to be easy with everything being a row
        // in the table (actual rows, group headers, 
        // summary row)...
        groupEl = Ext.fly(target).prev('.x-grid-group-hd');
    } else {
        // But from Ext4.2, everything became complicated.
        // Group headers & summary row seem to be embedded 
        // in the next or previous regular row... Since I
        // haven't entirely understood the logic behind, I
        // cannot guarantee this will work with all possible
        // cases...
        var row = Ext.fly(target).up('.x-grid-row');
        while (row && !groupEl) {
            groupEl = row.down('.x-grid-group-hd');
            row = row.prev('.x-grid-row');
        }
    }

    // We can get the group name from the group element,
    // but we need a reference to the grouping feature 
    // instance...
    var groupName = groupingSummary.getGroupName(groupEl);

    // Here you are...
    console.log('Group clicked: ' + groupName);
}
Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['student', 'subject', {
        name: 'mark',
        type: 'int'
    }]
});

var groupingSummary = Ext.create('Ext.grid.feature.GroupingSummary', {
    groupHeaderTpl: 'Subject: {name}',
    ftype: 'groupingsummary'
});

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 240,
    renderTo: document.body,
    features: [groupingSummary],
    store: {
        model: 'TestResult',
        groupField: 'subject',
        data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
        },{
            student: 'Student 1',
            subject: 'Science',
            mark: 72
        },{
            student: 'Student 2',
            subject: 'Math',
            mark: 96
        },{
            student: 'Student 2',
            subject: 'Science',
            mark: 68
        }]
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value){
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    }]

    ,listeners: {
        click: {
            element: 'body'
            ,delegate: '.x-grid-row-summary'
            ,fn: function(e, target) {

                // Find group element (header), for the clicked summary
                var groupEl;

                if (Ext.getVersion().isLessThan('4.2')) {
                    // Life used to be easy with everything being a row
                    // in the table (actual rows, group headers, 
                    // summary row)...
                    groupEl = Ext.fly(target).prev('.x-grid-group-hd');
                } else {
                    // But from Ext4.2, everything became complicated.
                    // Group headers & summary row seem to be embedded 
                    // in the next or previous regular row... Since I
                    // haven't entirely understood the logic behind, I
                    // cannot guarantee this will work with all possible
                    // cases...
                    var row = Ext.fly(target).up('.x-grid-row');
                    while (row && !groupEl) {
                        groupEl = row.down('.x-grid-group-hd');
                        row = row.prev('.x-grid-row');
                    }
                }

                // We can get the group name from the group element,
                // but we need a reference to the grouping feature 
                // instance...
                var groupName = groupingSummary.getGroupName(groupEl);

                // Here you are...
                console.log('Group clicked: ' + groupName);
            }
        }
    }
});
Extjs grid grouping summary

Extjs grid grouping summary


By : Joey Granger
Date : March 29 2020, 07:55 AM
I hope this helps you . Is it possible to add a summary without using a group. , Change ftype: 'groupingsummary' to ftype: 'summary'
Extjs Show/Hide detail rows from Grouping summary grid in after render of grid

Extjs Show/Hide detail rows from Grouping summary grid in after render of grid


By : Arthur Stark
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I am trying to customise Grouping summary grid of ExtJS. As of now I have achieve UI part of Grid. I am stuck in small thing where I have to hide detail rows from grid so that it will show only summary row. , For this you need to get all rows using below code
code :
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
     });
 })
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
            });
        })
    }
});
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org