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.0/docs/api/Ext.panel.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);
}

});

[pavleg]

Hi,

In ExtJS 4.2 legend is too wide. To fix it add shrinkWrap: true to legend configuration.

Regards