extJs 4 grid customization - Total row at the end

Question

I want a grid with only two columns, one is for name and the other for percentage. The very last row will have 'Total' as the name and the total percent as 'percentage'. This row only will be styled differently than the other rows. Please guide me how can i accomplish this. Thanks..

Raptor

Answer 1

There is a grid feature to accomplish exactly that. It is covered here in the docs with some examples of how to use it.

You can also customize the style by providing your own implementation of the x-grid-row-summary class in your css.

EDIT

Here's some examples of setting the summary row style, as you can see there are a few ways to go about it. Realize that the summary row can't be referenced until the viewready event occurs, it is not ready at the afterrender event, so I put all this logic in a viewready listener:

Ext.create('Ext.grid.Panel', {
    features: [{
        ftype: 'summary'
    }],
    // other grid configs ...
    listeners: {
        viewready: function(grid) {

            // get reference to the summary row
            var summaryRow = grid.view.el.down('tr.x-grid-row-summary');

            // this will apply a css class to the row, in this example,
            // I am applying the extjs grid header style to my summary row
            summaryRow.addCls('x-grid-header-ct');

            // or, to do it all in javascript as you mentioned in the comment
            // first you would create a style object, I took these style
            // properties from the .x-grid-header-ct
            aStyleObject = {
                cursor: 'default',
                zoom: 1,
                padding: 0,
                border: '1px solid #d0d0d0',
                'border-bottom-color': '#c5c5c5',
                'background-image': 'none',
                'background-color': '#c5c5c5'
            }
            // then you pass the style object using setStyle
            summaryRow.setStyle(aStyleObject);

            // or you could set the style for each cell individually using 
            // addCls or setStyle:
            Ext.Array.each(summaryRow.query('td'), function(td) {
                var cell = Ext.get(td);
                cell.addCls('some-class');
                // or
                cell.setStyle(anotherStyleObject);
            });
        }
    }
});

Santos

can i modify grid css through configuration in ExtJs. I mean background color of rows,borer style, x-grid-row-summary color all from the Js ?? – Raptor

@Raptor I added some examples of setting the summary row style – Santos

Answer 2

if we have summary row (like this), simply we can use CSS on specific page.

<style>
.x-grid-row-summary .x-grid-cell{
    background-color: #f00 !important;
    font-size: x-large !important;
}

Disconnection