BuG? - Positioning Issue using dynamic form

[Wolfgang]

Hello,
using Ext1.1R1
i have a dynamic for that look should have:
2 columns
1 text input below those columns.
Example


sStd - sMin
eStd - eMin
commentTextField


Problem: The label of comment is displayed on the right side of sMin.
The only way to get it in the next line is to increase the width of the column holding sMin/eMin with respect to the size of the dialog holding the form.
But: it should work using the config option clear:true.

Here the code


frmBuchung.column(
//{width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
{width:50}, // apply custom css, clear:true means it is the last column
new Ext.form.TextField({
fieldLabel: 'Std',
name: 'sstime',
width:30
}),
new Ext.form.TextField({
fieldLabel: 'Std',
name: 'estime',
width:30
})
);

frmBuchung.column({width:80, clear:true},
new Ext.form.TextField({
fieldLabel: 'Min',
name: 'smtime',
width:30
}),
new Ext.form.TextField({
fieldLabel: 'Min',
name: 'emtime',
width:30
})
);


frmBuchung.container({},
new Ext.form.TextField({
id:'betreff',
fieldLabel:'Betreff',
width:520
})
);


I also tried things like frmBuchung.end() but this does not work and would be wrong, because the container do autoclose.

Seems to be a bug. Anyway - any hint is appreciated.

Regards

Wolfgang

[jack.slocum]

Try adding a width to the last container to ensure it drops to the next line.

If you don't want to add a width, try adding this to the last container to make sure it can actually clear:

{style: 'float:left;'}

[tryanDLS]

None of these solutions seem to fix the problem. I tried variations of this with the lastest 1.1 code from SVN. It seems that it's dependent on width of the 1st 2 columns forcing the container down. I modified the Form2 from the dynamic example


var top = new Ext.form.Form({
labelAlign: 'top'
});

top.column(
{width:282},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:225
}),

new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:225
})
);

top.column(
{width:272, style:'margin-left:10px', clear:true},
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:225
}),

new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:225
})
);
top.container(
{width:500, clear:true},
new Ext.form.TextField({
fieldLabel: 'Test1',
name: 'test1',
width:400
})
);
top.container({},
new Ext.form.HtmlEditor({
id:'bio',
fieldLabel:'Biography',
width:550,
height:200
})
);


This works, however if you reduce the width of the 2 columns by 20px each (262 and 252), the label floats next to the 2nd col and the field appears below the columns. Tried this with both FF and IE7 - the results are the same.
Looking at the HTML, the 2nd column div is getting the x-form-clear-left and x-form-clear divs, however, the container's div is not clearing the 2 columns.

EDIT: the solution for now is to add a
style:'clear:both' to the container.

[Wolfgang]

Thank you for your trouble. :)
Is this going to be the new value if {clear: true} is set in the next RC?

Regards

Wolfgang