ExtJs 4 grid setup - final line at the end

Question

I need a grid with two columns, one for the name and one for the percentage. The last line will be “Total”, as the name and total percentage, as “percentage”. This line will look different than other lines. Please help me how can I do this. Thanks..

Answer 1

There is a grid function to do just 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 are some examples of setting the style of the summary line, as you can see that there are several ways to do this. Understand that the final line cannot be referenced until the viewready event viewready , it is not ready for the afterrender event, so I put all this logic in the viewready :

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

Answer 2

if we have a summary line ( like this ), we can just use CSS on a specific page.

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