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

}

And now let us define the handleAfterRender function:

handleAfterRender : function(container) {

  this.chart = this.container.down(this.getChartXtype());

  if(!Ext.isDefined(this.chart) || this.chart ==null){
    Ext.Function.defer(function(){
      this.showErrorMessage({
        title: this.getErrorText(),
        text: this.getChartNotFoundErrorMsg()
      })
    }, 1000, this);
  }

  else{

    this.addDownloadButton();
  }

},

In this function, we are trying to get the chart component, and if the chart component isn't found, we will show an error message. And if the chart component is found, we will call the addDownloadButton function, which will create and add the download button. Now let us define the addDownloadButton function:

addDownloadButton: function(){

  var toolbar = this.getToolbar(),
  itemsToAdd = [],
  placeholder = '->',
  button = {
    iconCls : 'icon-export',
    text : this.getDownloadButtonText(),
    handler: this.saveChart,
    scope : this
  };

  if(toolbar.items.items.length === 0){
    itemsToAdd.push(placeholder);
  }

  itemsToAdd.push(button);
  toolbar.add(itemsToAdd); 
}

In this function, first we are trying to get the bottom toolbar by calling the getToolbar function and then adding the download button to that toolbar. Now let us define the getToolbar function:

getToolbar: function(){

  var dockedItems = this.container.getDockedItems(),
  toolbar = null,
  hasToolbar = false;

  if(dockedItems.length>0){
    Ext.each(dockedItems, function(item){
      if(item.xtype ==='toolbar' && item.dock == 'bottom'){
        hasToolbar = true;
        toolbar = item;
        return false;
      }
    });
  }

  if(!hasToolbar){
    toolbar = this.container.addDocked({
      xtype: 'toolbar',
      dock: 'bottom'
    })[0];
  }

  return toolbar;

}

You can see that in this function we are trying to get the container's bottom toolbar and if the toolbar is found, we are using that, and if not found, we are creating a new bottom toolbar. Now let us define the saveChart function, which will be called by clicking on the Download button:

saveChart: function(){

  this.chart.save({
    type : 'image/png'
  });

}

Here we use the plugin within a window:

Ext.define('Examples.view.chartdownloadplugin.ChartDownloadPluginWindow', {
  extend : 'Ext.Window',
  alias : 'widget.chartdownloadpluginwindow',
  requires : ['Examples.view.chartdownloadplugin.Chart',
             'Examples.plugin.ChartDownload'],

  constructor : function(config) {

    Ext.apply(this, {
      modal : true,
      width : 400,
      height : 300,
      title : 'ChartDownloadPlugin',
      layout : {
        type:'fit'
      },
      plugins:['chartdownload'],
        items : [Ext.create('Examples.view.chartdownloadplugin.Chart')],
      buttons : [{
        text : 'OK',
        handler : function() {
          this.close();
        },
        scope : this
      }]
    });
    this.callParent(arguments);
  }
});

And the following screenshot is the output where we used our chart downloader plugin:

Planning and coding the chart downloader

You can see that the Download as image button is generated at the window's bottom bar, and users can download the image by clicking on this button.

Now let us test this with another container that has no bottom bar defined:

Ext.define('Examples.view.chartdownloadplugin.ChartDownloadPluginWindow', {
  extend : 'Ext.Window',
  alias : 'widget.chartdownloadpluginwindow',
  requires : ['Examples.view.chartdownloadplugin.Chart',
          'Examples.plugin.ChartDownload'],

  constructor : function(config) {

    Ext.apply(this, {
      modal : true,
      width : 400,
      height : 300,
      title : 'ChartDownloadPlugin',
      layout : {
        type:'fit'
      },
      items : [{
        xtype:'panel',
        plugins:['chartdownload'],
        layout:'fit',
        items:[Ext.create('Examples.view.chartdownloadplugin.Chart')]
      }],
      buttons : [{
        text : 'OK',
        handler : function() {
          this.close();
        },
        scope : this
      }]
    });
    this.callParent(arguments);

  }
});

And the following screenshot is the output:

Planning and coding the chart downloader

You can see that the download button is now generated within the nested panel's bottom bar.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset