gistfile1.js

Ext.define('Ext.ux.FieldsetCollapser', {
    extend : 'Ext.Component',
    alias  : 'plugin.fieldsetcollapser',

    config : {
        collapsed       : false,
        body            : null,
        indicatorEl     : null,
        initialCollapse : false,
        bodyHeight      : null
    },

    applyCollapsed : function(collapsed) {
        if (collapsed && ! this.getBody()) {
            this.setInitialCollapse(collapsed);
        }
        else if (this.getBody()) {
            this.doCollapse(collapsed);
        }

        return collapsed;
    },

    init : function(parent) {
        var me    = this,
            title = parent.down('title'),
            body  = parent.element.down('.x-dock-body'),
            titleEl = title.element,
            indicatorEl,
            bodyHeight;

        setTimeout(function() {
            bodyHeight = body.getHeight();
            me.setBodyHeight(bodyHeight);

            if (me.getInitialCollapse()) {
                body.dom.style.height = 0;
                me.updateIndicator('+');
            }
            else {
                body.dom.style.height =  bodyHeight + 'px';
            }

        }, 1);


        titleEl.on({
            scope : me,
            tap   : me.onTitleTap
        });

        indicatorEl = Ext.Element.create({
            style : "font-weight: bold; float: left; width: 16px;"
        });

        indicatorEl.setHtml('-');

        titleEl.down('.x-innerhtml').insertFirst(indicatorEl);

        me.setIndicatorEl(indicatorEl);
        me.setBody(body);

        body.setStyle({
            '-webkit-transition-property' : 'height',
            '-webkit-transition-duration' : '.5s'
        });
    },

    onTitleTap : function() {
        this.setCollapsed(! this.getCollapsed())
    },

    doCollapse : function(collapsed) {
        var me         = this,
            body       = me.getBody(),
            bodyStyle  = body.dom.style,
            origHeight = me.getBodyHeight();

        if (collapsed) {
            bodyStyle.height = 0;
            me.updateIndicator('+')
        }
        else {
            bodyStyle.height = origHeight + 'px';
            me.updateIndicator('-')
        }
    },

    updateIndicator : function(val) {
        this.getIndicatorEl().setHtml(val);
    }
});


/*** IMPLEMENTATION BELOW *****/
    Ext.require([
        'Ext.MessageBox',
        'Ext.form.Panel',
        'Ext.ux.FieldsetCollapser'
    ]);

    Ext.application({
        launch : function() {
            Ext.Viewport.add({
                xtype  : 'toolbar',
                docked : 'top',
                title  : 'Collapsible Fieldsets'
            });

            Ext.Viewport.add({
                xtype  : 'formpanel',
                items  : [
                    {
                        xtype       : 'fieldset',
                        defaultType : 'textfield',
                        itemId      : 'fs',
                        title       : 'Name info',
                        plugins      : {
                            type      : 'fieldsetcollapser',
                            collapsed : true
                        },
                        items       : [
                            {
                                label : 'First'
                            },
                            {
                                label : 'Middle'
                            },
                            {
                                label : 'Last'
                            }
                        ]
                    },
                    {
                        xtype       : 'fieldset',
                        defaultType : 'textfield',
                        itemId      : 'fs',
                        title       : 'Address info',
                        plugins      : {
                            type : 'fieldsetcollapser'
                        },
                        items       : [
                            {
                                label : 'Address'
                            },
                            {
                                label : 'City'
                            },
                            {
                                label : 'State'
                            },
                            {
                                label : 'Postal'
                            }
                        ]
                    },
                    {
                        xtype       : 'fieldset',
                        defaultType : 'textfield',
                        itemId      : 'fs',
                        title       : 'Vehicle info',
                        plugins      : {
                            type : 'fieldsetcollapser'
                        },
                        items       : [
                            {
                                label : 'Make'
                            },
                            {
                                label : 'Model'
                            },
                            {
                                label : 'Mileage'
                            },
                            {
                                label : 'Color'
                            }
                        ]
                    }
                ]
            });

        }
    });