JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
JavaScript
Ext.define('MY.fieldset', {
extend: 'Ext.form.FieldSet',
alias: 'widget.myfieldset',
initComponent: function() {
this.addEvents('beforeexpand', 'beforecollapse');
this.callParent([arguments]);
},
setExpanded: function(expanded){
var bContinue;
if (expanded)
bContinue = this.fireEvent('beforeexpand', this);
else
bContinue = this.fireEvent('beforecollapse', this);
if (bContinue !== false)
this.callParent([expanded]);
}
});
Ext.widget('myfieldset',{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
renderTo: Ext.getBody(),
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}],
listeners: {
'beforeexpand': function(fieldset){
alert('beforeexpand');
},
'beforecollapse': function(fieldset){
alert('beforecollapse');
}
}
})