Ext.ux.form.ToolFieldSet - Fieldset that allows extra tools

[conorarmstrong]

From what I can see the standard FieldSet component in ExtJS v4 doesn't provide an option for extra tools to be included beyond a collapse tool and a checkbox. This extension reintroduces the tools config option to allow the full range of tools as given shown in http://dev.sencha.com/deploy/ext-4.0...anel.Tool.html

I'm not 100% on layout, but if anyone can advise how to perhaps show the tools on the far right of the fieldset legend, I'll gladly make the appropriate changes.

// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* @class Ext.ux.form.ToolFieldSet
* @extends Ext.form.FieldSet
*
* A simple extension to allow inclusion of tools in a fieldset
*
* @author    Conor Armstrong
* @copyright (c) 2011 Conor Armstrong
* @date      02 May 2011
* @version   0.1
*
* @license Ext.ux.form.ToolFieldSet.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the 
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
* 
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
*
*/

Ext.define('Ext.ux.form.ToolFieldSet', {
  extend: 'Ext.form.FieldSet',
  alias: 'widget.toolfieldset',
  tools: [],

  initLegend: function() {
    var me = this,
    legendItems,
    legend = me.legend;

    // Create the legend component if needed and it hasn't been already
    if (!legend && (me.title || me.checkboxToggle || me.collapsible)) {
      legendItems = [];

      // Checkbox
      if (me.checkboxToggle) {
        legendItems.push(me.createCheckboxCmp());
      }
      // Toggle button
      else if (me.collapsible) {
        legendItems.push(me.createToggleCmp());
      }

      // Add Extra Tools
      if (me.tools) {
        legendItems.push(me.createToolsCmp());
      }

      // Title
      legendItems.push(me.createTitleCmp());

      legend = me.legend = Ext.create('Ext.container.Container', {
        baseCls: me.baseCls + '-header',
        ariaRole: '',
        getElConfig: function(){
          return {
            tag: 'legend',
            cls: this.baseCls
          };
        },
        items: legendItems
      });
    }

    // Make sure legend is rendered if the fieldset is rendered
    if (legend && !legend.rendered && me.rendered) {
      me.legend.render(me.el, me.body); //insert before body element
    }
  },

  createToolsCmp: function() {
    var me = this, toolArray=[];
    for (var i=0; i<me.tools.length; i++) {
      toolArray.push(Ext.create('Ext.panel.Tool', me.tools[i]));
    }
    me.tools=toolArray;
    return me.tools;
  }

});

[EASA.DEV]

Your code didn't work for me in ExtJS 4.1.3. Actually I don't understand how this ever worked, since there's no initLegend method in Ext.form.FieldSet.

In any case, this version works in ExtJS 4.1.3:

Ext.define('Ext.ux.form.ToolFieldSet', {
    extend: 'Ext.form.FieldSet',
    alias: 'widget.toolfieldset',
    tools: [],

    createLegendCt: function () {
        var me = this,
            items = [],
            legend = {
                xtype: 'container',
                baseCls: me.baseCls + '-header',
                id: me.id + '-legend',
                autoEl: 'legend',
                items: items,
                ownerCt: me,
                ownerLayout: me.componentLayout
            };

        // Checkbox
        if (me.checkboxToggle) {
            items.push(me.createCheckboxCmp());
        } else if (me.collapsible) {
            // Toggle button
            items.push(me.createToggleCmp());
        }
        // Add Extra Tools
        if (Ext.isArray(me.tools)) {
            for(var i = 0; i < me.tools.length; i++) {
                items.push(me.createToolCmp(me.tools[i]));
            }
        }
        // Title
        items.push(me.createTitleCmp());

        return legend;
    },

    createToolCmp: function(toolCfg) {
        var me = this;
        Ext.apply(toolCfg, {
            xtype:  'tool',
            width:  15,
            height: 15,
            id:     me.id + '-tool-' + toolCfg.type,
            scope:  me
        });
        return Ext.widget(toolCfg);
    }

});