Product SiteDocumentation Site

6.2. Widget configuration

To allow the widget to do something, you need to add the custom functionality inside the class. In our example, we save the URL of the site which activity we want to monitor in the widget’s settings. To use them we need to initialize parameter hasConfig in constructor and set it to true. For example, here is the part of the constructor that tells this to the widget framework:
constructor : function(config) {
  config = config || {};
  Ext.applyIf(config, {
    name: 'fb',
    height: 600,
    hasConfig : true
  });
}
After this, the "gear" icon will appear in the right top corner of the widget (see e.g. Figure 6.1, “Widget settings”).
Widget settings
Figure 6.1. Widget settings

When you click on this icon, the config method of the widget will be called. In this method, we can setup the widget’s settings dialog and show it.
/**
 * Called when a user clicks the config button on the widget panel.
 * Shows the window with url field - where the user need to put
 * new value for Facebook Activity Site.
 */
config : function()
{
  var configWindow = new Ext.Window({
    title  : _('Configure widget'),
    layout : 'fit',
    width  : 350,
    height : 120,
    items : [{
      xtype : 'form',
      frame : true,
      ref : 'formPanel',
      labelWidth : 180,
      items : [{
        xtype: 'textfield',
        anchor: '100%',
        fieldLabel: _('Site name to track the activity'),
        allowBlank : false,
        vtype: 'url',
        ref : '../siteUrlField',
        name: 'site_url',
        value: this.get('site_url')
      }],
      buttons : [
        {
          text : _('Save'),
          scope : this,
          ref : '../../savebutton',
          handler : this.saveUserUrlToSettings
        },
        {
          text: _('Cancel'),
          scope : this,
          ref : '../../cancelbutton',
          handler : this.closeConfigWindow
        }
      ]
    }]
  });
  configWindow.show(this);
},
To save or receive the settings value we use this.set() and this.get() methods respectively. In our example, we get the default value of the "site url field" using this.get('site_url'). If it was not stored before with this.set('site_url'), it will return undefined. You will need to take care for this by yourself. That is why we use Ext.isEmpty check the value in the constructor:
var siteUrl = this.get('site_url');
if( Ext.isEmpty( siteUrl ) ) {
    siteUrl = this.defaultFbActivitySite;
    this.set('site_url', siteUrl);
}
this.setTitle( _('Facebook') + ' - ' + siteUrl);
Don’t forget to call parent constructor or the widget will not work; the parent class' constructor puts it in the proper location and takes care of loading the settings, and so on.
Zarafa.widgets.FBWidget.superclass.constructor.call(this, config);