For an Ext JS 4.1 grid with GroupingSummary, I want to be able to print one page per group.
I am able to get a working solution on Firefox by adding a row after each summary, and setting its @media print style to page-break-before:always. However, this does not work on Chrome or Safari. As I understand it, the reason is that Webkit does not support page-break-before on table rows. I even tried setting the table row display style to block to try to force it, but the page top margins are messed up.
I also was able to get a working solution for all browsers by writing a special printer script, which basically extracts the grid html, clones grid html for each group, and moves each group's table rows to one of these new html grids. Then it takes all the html and writes it to an iframe that covers over the existing web page screen and calls window.print(). One nice thing is that the column headers are at the top of each new group's page.
My main two gripes with this solution are: (1) user can't print original web page using browser print function, i.e., user needs to click on my print button; and (2) it's hacky.
It seems like the best solution would be an Ext-native solution for rendering grouped grids, each its own html table. Does anybody have their own solution that they like?
