View Full Version : [CLOSED][3.1] getViewSize error during render

4 Jan 2010, 4:36 AM

After moving from 3.0 to 3.1 I've found a problem with form panel rendering.
Until now I had a form panel in window with only autoScroll (in form) set to true.

That configuration worked fine, because I had scrollable form body with buttons on the end of non-scrollable window.

In new version there is a problem with this: if I do not define autoHeight to true, the form body has height = 0px, and then getViewSize called during window layout returns bad height. If I define it - whole form [with buttons] is scrollable within the window.

I've found that there were some changes in Container class: method named render changed to afterRender. This means that container [window] is in layout stage and it's contents [form] is not even rendered, so it really has height = 0px and this is written in styles during window layout. Then after window layout form is rendered, but it's height is written 0px in tag's style [unless it's set to 'auto' by autoHeight].

The question is if it's a bug or a planned change and I'm unable to configure it?

Jamie Avins
4 Jan 2010, 11:54 AM
This seems like a bug, could post an example.

4 Jan 2010, 12:38 PM
Below you've got remake of window example [hello world]
Check the selected line - if it's commented out - the height of component is invlaid, but if you find the <form> tag in firebug and remove style "height: 0px" it is ok.

My search says that getViewSize in window is called before the form is rendered

var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
win = new Ext.Window({
xtype: "window",
animCollapse: false,
autoScroll: false,
border: true,
closable: true,
collapsible: true,
height: null,
iconCls: "icon-window",
layout: "fit",
maximizable: true,
minimizable: true,
title: "Wy\u015blij wiadomo\u015b\u0107",
width: 300,
autoHeight: true,
items: [{
xtype: "form",
//autoHeight: true,
autoScroll: true,
defaultType: "textfield",
padding: 5,
url: "gnokii\/sms_zapisz",
items: [{
xtype: "hidden",
name: "hash",
fieldLabel: "",
allowBlank: true,
value: "f08b6e628c4f91681e71f8c53fe6a740"
}, {
xtype: "textfield",
name: "numer",
fieldLabel: "Numer",
allowBlank: false,
value: "+48",
listeners: {
specialkey: Ext.emptyFn
anchor: "90%",
regex: /^\+48[0-9]{9}$/,
regexText: "Podaj poprawny numer telefonu"
}, {
xtype: "textarea",
name: "wiadomosc",
fieldLabel: "Wiadomo\u015b\u0107",
allowBlank: true,
anchor: "90%",
grow: true,
maxLength: 160
closeOnSubmit: true,
buttons: [{
xtype: "button",
handler: function () {
var p = this.findParentByType('form');
text: "Wy\u015blij"

4 Jan 2010, 12:45 PM
That's right. The Window is layout 'fit' which means it should fit the form to its size. Which is autoHeight, so the layout manager, when it enquires what height it has to play with receives an answer of zero.

6 May 2010, 3:20 AM
Spend some time and found it.
During window layout form has to be measured, but it's empty.
The bug is in form rendering: it's rendered during form's layout (after container layout), but should be rendered somewhere around onRender in form.

Te solution is simple: I've added one listener:

form.on('afterrender', function() {
this.layout.renderAll(this, this.body);

This is executed before doLayout on window, and in this case the form is measured right.

That is dirty workaround but works.
Now time for ext team to put it in right way into form code.