View Full Version : [INFOREQ] [4.0.7 (possible all)] Layouting issues w/ multiple elements (forms)

Jan (HL)
30 Nov 2011, 6:27 AM
We're upgrading our application from Ext JS 3 to 4 and we have noticed some strange layout (component) issues, perhaps internal racing conditions?

A "standard" form (in our application) has only some fields like: text fields, number fields, combo fields, item selectors and, special case, grids. Because we need the command "clear value", I'd created an additional button to clear the combo field value. This solution is now a FieldContainer with a flexed ComboBox and a Button. In about 1-2 of 5 cases some (non determined!) combo fields has "flexed" width, sometimes not. See the next screenshots.




The last image shows an extra padding between the combobox and the grid.

Then there are the more complex forms...
These are used in multiple editing of items. In this situations, it's getting really worse.

OKAY: except that an ItemSelectors cannot be modified if it has created with disabled:true within a form/field container

NOT OKAY: Now we can see, that some additional spaces were rendered between the components.

Note 1: The large space in the center matches exactly the height (200px) of the grids (but there is actually no grid). (see: http://cl.ly/2T0y0C2S3Y1r2C2K0T3A)
Note 2: The width of the combobox (with button) seems to be equals with the space before the fields "Scheduler options" / "Address".

Some details about the implementation: There is one FieldContainer which contains a fixed CheckBox and a flexible field (or another FieldContainer).

Also, just another small issue: Sometimes, if the label contains two lines, the textfield will expand its height to match the label's height. And sometimes not, it will only aligned at the top of the whole container.


Is this behavior already well-known or should I provide a demo? I had left this out because the cut-off needs some time. :/

30 Nov 2011, 12:24 PM
Can I get a test case that runs locally?

Jan (HL)
1 Dec 2011, 4:04 PM
Well, I'm sorry, that was not possible. :/

I've tried extracting the behavior and the components but cannot reproduce the problems. So I have inspected the data (with illuminations in firefox and default dom/objects in chrome) and checked the configuration objects and the real component objects with the rendered components in the browser.

The not existing example so far. I'm using such a component used for conditional form fields. Please note that in my extracted testcases this actually works bugfree. However, the following specific component is technically identic (but this example isn't contextaware, I'm sorry).

About the context: A window with autoScroll and a specific height/width containing a FormPanel with a list of fieldsets. Each fieldset contains fields respective conditionals.

Ext.define('Testcase.form.Conditional', {
extend : 'Ext.form.FieldContainer',
alias : 'widget.testcase-form-conditional',

item : {xtype:'textfield'},
layout : {
type : 'hbox'

valueDisabled : true,

initComponent : function(){

var checkbox = {}, item = {};

Ext.apply(checkbox, {
id : Ext.id(),
xtype : 'checkbox',
boxLabel : 'Override',
checked : !this.valueDisabled,
width : 150,
listeners : {
scope : this,
change : function(field, checked){
if (checked) {
} else {

Ext.apply(item, {
id : Ext.id(),
disabled : this.valueDisabled,
flex : 1

if (this.item) {
Ext.apply(item, this.item);

this.items = [ checkbox, item ];

The usage of this:

xtype : 'testcase-form-conditional',
item : {
xtype : 'fieldcontainer',
items : [{

This will/should generate a fieldcontainer containing a non-flexible checkbox and a flexible item (e.g. a combobox, textfield or just another fieldcontainer). See screenshot in the first posting.

The problem so far.
Because of that, I can point out the actual problem: The extjs layout engine/renderer adds a flex attribute for the first checkbox item where it should not to do. This is not deterministic (show the panel another time w/o reloading the page produces another result and two exactly configuration produces different results). I could see that in the browsers' DOM world (a flex: 1 in the generated extjs component object of the checkbox). Even if I configurate the checkbox explicit with flex=0 (or via layout-config) "someone" reconfigured the items with flex=1. When both items have flex, they get 50%/50% which was exactly what the browser has rendered.

The solution so far.
My current solution is so stupid that I would normally say the bug isn't correct identified.. but, well it works currently. I don't know why, so I'm not satisfied. Not really: I have copied the configuration of the component as an "inline" configuration object.