The first capability we are going to implement is exporting the contents of a GridPanel to PDF and Excel. We will implement these features for the Films GridPanel we implemented in the preceding chapter. However, the logic is the same for any GridPanel you might have in an Ext JS application.

The first thing we are going to do is add the export buttons to the GridPanel toolbar. We will add three buttons: one to Print the contents of the GridPanel (we will develop this feature later, but let's add this button right now), one button for Export to PDF, and one button for Export to Excel:

Remember that in the preceding chapter, we created a toolbar, Packt.view.base.TopToolBar. We are going to add these three buttons on this toolbar:

items: [
    //Add Button
    {
        xtype: 'tbseparator'
    },
    {
        xtype: 'button',
        text: 'Print',
        glyph: Packt.util.Glyphs.getGlyph('print'),
        listeners: {
            click: 'onPrint'
  ...