FieldSet before collapsed

[genggeng13]

Hi , is that any equivalent event for before collapsed ?

i want to do something when i trigger the collapsed either expand or collapse

Thank you

[vietits]

Fieldset fires 'beforecollapse' event before it's collapsed.

[genggeng13]

Hi vietits,

i am aware of that but , when i put this to the listener it is not working , and i go through the documentation found out it is no longer there, thus i am look for equivalent thing to do that , do you have any idea ?

[vietits]

beforeexpand/beforecollapse events only available from Ext 4.1. There is no equivalent event on Ext 4.0. However, you can overrride Ext.form.Fieldset to fire those events:

Ext.define('MyOverride.FieldSet', {
    override: 'Ext.form.FieldSet',
    setExpanded: function(expanded) {
        var me = this,
            operation = expanded ? 'expand' : 'collapse';


        if (!me.rendered || me.fireEvent('before' + operation, me) !== false) {
            me.callOverridden(arguments);
        }
    }
});

[genggeng13]

hi vietits,

thank you for your suggestion , but how do i implement this for different fieldset, for example i have 2 fieldset.

i try tou use your override , but some how it only targeted the last fieldset . i am not sure am i implement it in a wrong way . please advise .

[vietits]

This override will be applied to the prototype of Ext.form.FieldSet so it will has effect to all FieldSet instances.

[genggeng13]

Ext.onReady(function() {
Ext.create('Ext.window.Window', {
                        id : 'win',
                        width: 500,
                        height: 475,
                        layout: 'fit',
                        plain: true, 
                        border: false,
                        items: [
                            Ext.create('Ext.form.Panel', {
                            id:'frmViewDetail'
                            items: [{
                               xtype: 'fieldset',
                                id: 'chkvfieldService',
                                title: 'Category',
                                collapsible: true,
                                items: [{
                                    xtype: 'checkboxgroup',
                                    id: 'chkService',
                                    fieldLabel: 'Service',
                                    columns: 4,
                                    vertical: false
                                }]
                           },{
                               xtype: 'fieldset',                                id: 'chkFieldType',
                                title: 'A',
                                collapsible: true,
                                items: [{
                                    xtype: 'checkboxgroup',
                                    id: 'chkType',
                                    fieldLabel: 'Type',
                                    columns: 4,
                                    vertical: false
                                }]
                              }

                           ]
                        
                        }]
})
})

Ext.define('MyOverride.FieldSet', {
    override: 'Ext.form.FieldSet',
    setExpanded: function(expanded) {
        var me = this,
            operation = expanded ? 'expand' : 'collapse';




        if (!me.rendered || me.fireEvent('before' + operation, me) !== false) {
            me.callOverridden(arguments);
            alert("Working")
        }
    }
});

My Code is something like above , somehow when i collapse or expand the fieldset for 'chkFieldType' it will display the alert, but when i try to collapse or expand 'chkvfieldService' the alert will not display.

i try to debug it , it wont fire the override.

wondering am i putting the override function in a wrong place ?

[vietits]

The following code works well for me on Chrome 18 with both Ext 4.0.7 and Ext 4.1.0

Ext.onReady(function(){
    Ext.define('MyOverride.FieldSet', {
        override: 'Ext.form.FieldSet',
        setExpanded: function(expanded) {
            var me = this,
                operation = expanded ? 'expand' : 'collapse';
            if (!me.rendered || me.fireEvent('before' + operation, me) !== false) {
                me.callOverridden(arguments);
                alert("Working")
            }
        }
    });


    Ext.create('Ext.window.Window', {
        id : 'win',
        width: 500,
        height: 275,
        layout: 'fit',
        plain : true, 
        autoShow: true,
        border: false,
        items: [Ext.create('Ext.form.Panel', {
            id: 'frmViewDetail',
            items: [{
               xtype: 'fieldset',
                id: 'chkvfieldService',
                title: 'Category',
                collapsible: true,
                items: [{
                    xtype: 'checkboxgroup',
                    id: 'chkService',
                    fieldLabel: 'Service',
                    columns: 4,
                    vertical: false
                }]
            },{
                xtype: 'fieldset',
                id: 'chkFieldType',
                title: 'A',
                collapsible: true,
                items: [{
                    xtype: 'checkboxgroup',
                    id: 'chkType',
                    fieldLabel: 'Type',
                    columns: 4,
                    vertical: false
                }]
            }]
        })]
    });
});