PDA

View Full Version : Making an accordion element refresh its layout when expanded



CCExp
21 Jul 2010, 5:42 PM
Does anyone know how to call doLayout() on an item when it is expanded? I have an application where there's an accordion element containing several formpanels. These formpanels have composite fields that don't render on the non-expanded formpanels, but I can make them render by using the form's doLayout() function. I have tried adding this property to the form using the onExpand property:



Ext.form.CalcFormPanel = Ext.extend(Ext.form.FormPanel, {
labelWidth: 75,
bodyStyle:'padding:5px 5px 0',
border:false,
onExpand: function() {
this.doLayout();
},
width: 280,
defaults: {width: 80},
forceLayout: true,
defaultType: 'textfield'
});
But this causes my form not to work and throws JS error messages. Does anyone know how I can cause the doLayout() function to fire whenever a given form in the accordion is expanded? Thanks for any help.

24 Jul 2010, 4:03 PM
You can't add arbitrary members to a class and expect the class to call it.



Ext.form.CalcFormPanel = Ext.extend(Ext.form.FormPanel, {
labelWidth: 75,
bodyStyle:'padding:5px 5px 0',
border:false,
initComponent: function() {
Ext.form.CalcFormPanel.superclass.initComponent.call(this);
this.on('expand', this.doLayout, this);
},
width: 280,
defaults: {width: 80},
forceLayout: true,
defaultType: 'textfield'
});