Planning and coding the chart downloader

The plugin's container may or may not have the bottom bar, so we need to search for the bottom bar within the container. If found, we will use that, otherwise we need to create the bottom bar, and then we can add the download button to that bottom bar.

Now let us start coding for the plugin.

Ext.define('Examples.plugin.ChartDownload', {

  alias : 'plugin.chartdownload',

  config : {
    chartXtype: 'chart',
    downloadButtonText: 'Download as image',
    chartNotFoundErrorMsg: 'No valid chart type found!',
    errorText: 'Error'
  }
…

Here we are providing a configuration option chartXtype so that we can configure this plugin with a proper xtype of the chart, which we are targeting to download as an image. Now let us define the required init function for this plugin:

init : function(container) {

  this.container = container;

  if (!container.rendered) {
    container.on('afterrender', this.handleAfterRender, this);
  } else {
    this.handleAfterRender...