We are almost on the final stage of our application. Ext JS provides great capabilities, but there are some capabilities that we need to code by ourselves with the help of other technologies. Despite possessing a GridPanel with paging, sorting, and filter capabilities, sometimes the user is going to expect more from the application. Adding features such as printing, the ability to export to Excel and PDF, and the ability to export charts to images and PDF can add great value to the application and please the final user.
So, in this chapter, we will cover:
- Printing records of a GridPanel
- Exporting GridPanel information to PDF and Excel
- Creating charts
- Exporting charts to PDF and images
- Using third-party plugins
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'
}
},
{
xtype: 'button',
text: 'Export to PDF',
glyph: Packt.util.Glyphs.getGlyph('pdf'),
listeners: {
click: 'onExportPDF'
}
},
{
xtype: 'button',
text: 'Export to Excel',
glyph: Packt.util.Glyphs.getGlyph('excel'),
listeners: {
click: 'onExportExcel'
}
}
]All buttons have listeners that we will handle in the ViewController. In this case, buttons will be in the FilmsController class.
Inside the Glyphs class, we are also going to add the following attributes to represent the icons:
print: 'xf02f', pdf: 'xf1c1', excel: 'xf1c3'
Now that the buttons are being displayed on the Films GridPanel, it is time to go back to FilmsController and add these capabilities.
The first button we are going to listen to is the Export to PDF click event. When the user clicks on this button, we will execute the following method:
onExportPDF: function(button, e, options) {
var mainPanel = Ext.ComponentQuery.query('mainpanel')[0]; //#1
var newTab = mainPanel.add({
xtype: 'panel',
closable: true,
glyph: Packt.util.Glyphs.getGlyph('pdf'),
title: 'Films PDF',
layout: 'fit',
html: 'loading PDF...',
items: [{
xtype: 'uxiframe', //#2
src: 'php/pdf/exportFilmsPdf.php' //#3
}]
});
mainPanel.setActiveTab(newTab); //#4
}What we want to implement is that when the user clicks on the Export to PDF button, a new tab (#4) will be opened with the PDF file in it. This means we need to get that Main Panel class (xtype mainpanel) we declared as the center item of the Viewport of the application (#1), add a new tab to it, and as the PDF file will be inside it, we can implement it as iFrame. To implement iFrame in Ext JS, we can use the iFrame plugin (#2) that is distributed within the SDK.
Inside the ViewController, we have access to the Films View, but we need to access mainpanel. We can get the Films View using the getView method and then use the up method to get mainpanel, or we can use Ext.ComponentQuery to query mainpanel. Remember that Ext.ComponentQuery returns an array of all matching results, but as we know, there is only one mainPanel in the application, so we can retrieve the first position.
Now comes the most important part: Ext JS does not provide the Export to PDF capability natively. If we want the application to have it, we need to implement it using a different technology. In this case, the PDF will be generated on the server side (#3), and we will only display its output inside the iFrame.
When we execute the code, we will get the following output:
As we need to generate the file on the server side, we can use any framework or library that is available for the language we are using on the server. We can use TCPDF (http://www.tcpdf.org/). There are other libraries as well, and you can use the one you are most familiar with.
Tip
If you are using Java, you can use iText (http://itextpdf.com/), and if you are using .NET, you can use excellibrary (https://code.google.com/p/excellibrary/).
Thanks to HTML5, it is also possible to generate a PDF file using the HTML5 API. There are a few solutions that we can use to generate the file without using any server-side code and only using JavaScript. One of them is using jsPDF (https://github.com/MrRio/jsPDF).
By default, the browser is going to use whatever PDF viewer software the user has installed on the computer to view the PDF file. It is also possible to use a PDF viewer developed with JavaScript called pdf.js. This solution is implemented and maintained by Mozilla (https://github.com/mozilla/pdf.js/). There is also an Ext JS plugin developed on pdf.js (https://market.sencha.com/extensions/pdf-panel-without-plugin-needed).
To export the GridPanel to Excel, we will also use a server-side technology to help us.
On the Ext JS side, the only thing we need to do is to call the URL that will generate the Excel file as follows:
onExportExcel: function(button, e, options) {
window.open('php/pdf/exportFilmsExcel.php'),
}On the server side, we will use the PHPExcel (http://phpexcel.codeplex.com/) library to help us generate the Excel file.
Tip
If you are using Java, you can use the Apache POI library (http://poi.apache.org/), and if you are using .NET, you can use excellibrary (https://code.google.com/p/excellibrary/).
If you want to export the GridPanel of any other content from an Ext JS component to Excel, PDF, .txt, or a Word document, you can use the same approach.
Note
There is also an Ext JS plugin that exports a grid to an Excel file: http://goo.gl/E7jif4.