PDA

View Full Version : [CLOSED] Autoheight not being obeyed, and height is being set on element



BigSeanDawg
12 Oct 2011, 5:20 PM
Hi there,

I'm noticing that a form I have in a window doesn't seem to obey my autoHeight: true. I've simplified my code a bit for posting, but I've verified the height is still being set in this example.

This could be a sandbox issue. I'm working with Ext 3.3.1 and Ext 4.0.6 sandboxed.

Here is my classes:



/**
* The panel for adding items
*/
Ext4.define('jx4.panel.AddItemPanel', {
extend: 'Ext4.Container',

autoHeight: true,
border: false,

initComponent: function() {
var toolsId = Ext4.id();
Ext.apply(this, {
cls: 'jx4-addItemPanel',
items: [
{
xtype: 'component',
id: toolsId
},
Ext4.create('jx4.panel.AddItemPanel.ItemForm', {
toolsId: toolsId
})
]
});

this.callParent(arguments);
}

});




/**
* Each item in the AddItemPanel is an ItemForm
*/
Ext4.define('jx4.panel.AddItemPanel.ItemForm', {
extend: 'Ext4.form.Panel',

toolsId: null,
autoHeight: true,
border: false,

initComponent: function() {
Ext.apply(this, {
layout: '',
cls: 'my-item-form',

defaults: {
anchor: '90%'
},
items: [
{
fieldLabel: 'Name',
xtype: 'textfield',
name: 'name'
},{
fieldLabel: 'Description',
xtype: 'textarea',
name: 'description'
}, {
fieldLabel: 'Description2',
xtype: 'textarea',
name: 'description2'
}
]
});

this.callParent(arguments);
},

afterRender: function() {
this.callParent(arguments);
Ext4.Function.interceptAfter(this.el, 'setHeight', Ext4.bind(this.doLog, this));
Ext4.Function.interceptAfter(this.el, 'setSize', Ext4.bind(this.doLog, this));
},

setHeight: function() {
this.doLog();
this.callParent(arguments);
},

setSize: function() {
this.doLog();
this.callParent(arguments);
},

doLog: function() {
console.trace();
}
});


And here is my window being opened:


Ext4.onReady(function() {
var w = Ext4.create('Ext4.window.Window', {
title: 'Ext4 Add Item Window',
width: 800,
height: 600,
autoShow: true,
items: Ext4.create('jx4.panel.AddItemPanel')
});
});



You need to have Firebug open to see my console.trace(). I'm doing a trace on my Ext4.form.Panel element's setSize() method. In a component with autoHeight: true, I wouldn't expect to see any setSize() being called on my component's element.

The setSize is happening from Ext.layout.component.AbstractDock line 240. It appears that info.size.height is being used, but perhaps info.bodyBox.height should be used since on line 291 it is nulled out because my component has autoHeight.

What I'm actually doing here (not displayed in code above) is loading a CKEditor instead of text areas, and the CKEditor takes awhile to load, but once it does, it is resized taller, and my form is not growing since the height has been set.

Let me know if you need any other details, and thanks for the help!
-Sean

evant
12 Oct 2011, 6:01 PM
This will be resolved as part of the layout refactoring that's being done for 4.1. At the moment it's not really feasible to fix these kinds of issues in the 4.0.x branch. So for now, just hang tight for 4.1!