PDA

View Full Version : [Ext 3.0] Resize event too early -> Fieldset resizes to initial window size



seizmo
11 Feb 2010, 3:19 PM
Hello everybody,

I have several fieldsets in a form layout within a tabpanel (which is again nested in many more containers, its a relatively involved app). When the browser window is resized, the fieldsets adjust their size to the size of the browser BEFORE the resize.

So when I make the window smaller, the width of the fieldsets stays the same. When I then make the window bigger again, the fieldsets resize to the smaller window (as they should have on the first resize).

Unfortunately, its very hard to track down the problem since its not that the fieldsets don't get resized but they seem to react too early to the resize (at the very beginning and not when the resize is complete).

It's a bit tricky for me to post any code, because the app has actually thousands of (otherwise well working) code and therefore I can't really give you the whole picture. But maybe this gives you an idea:



Ext.extend(STIWA.samuel.form.ObjektStandortForm, STIWA.samuel.form.ObjektForm, {
initComponent: function() {
Ext.apply(this, {
id: 's-objekt-standort-form',
items: [{xtype: 'tabpanel', activeTab: 0, deferredRender: false, border: false, defaults: {frame: true, layout: 'anchor'},
items: [
{ title: 'Makrostandort | Controlling', items: [
{ title: 'Makrostandort', xtype: 'STIWA.form.FieldSet',
items: [{
layout: 'column',
items:[{ xtype: 'STIWA.form.Pane',
items: [
{ fieldLabel: 'Nächste Stadt', name: 'mak_naechste_stadt' }
]
},{ xtype: 'STIWA.form.Pane',
items: [
{ fieldLabel: 'Nächste Stadt Distanz', name: 'mak_distanz_naechste_stadt' }
]
}]
},
{ fieldLabel:'Kommentar', name: 'mak_kommentar', xtype:'textarea', height: 100, anchor: '98%' }]
}

]
}]
}]
});
STIWA.samuel.form.ObjektStandortForm.superclass.initComponent.call(this);

this.addButton({
text: 'Speichern',
handler: this.submitButtonHandler,
scope: this
});
}
});


STIWA.form.Pane = function(config){
STIWA.form.Pane.superclass.constructor.call(this, config);
};
Ext.extend(STIWA.form.Pane, Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
columnWidth:.5,
layout: 'form',
defaultType: 'textfield',
defaults: {
anchor: '95%'
}
});
STIWA.form.Pane.superclass.initComponent.call(this);
}
});
Ext.reg('STIWA.form.Pane', STIWA.form.Pane);

STIWA.form.FieldSet = function(config){
STIWA.form.FieldSet.superclass.constructor.call(this, config);
};
Ext.extend(STIWA.form.FieldSet, Ext.form.FieldSet, {
initComponent: function() {
Ext.apply(this, {
anchor:'100%',
autoHeight: true
});
STIWA.form.FieldSet.superclass.initComponent.call(this);
}
});
Ext.reg('STIWA.form.FieldSet', STIWA.form.FieldSet);





Any help would be much appreciated!

Cheers
Michael