PDA

View Full Version : [CLOSED] [#153] FieldContainer LabelAlign "Top" with AnchorLayout



stratadev
Feb 26, 2013, 3:00 PM
Hi,

I am currently on ExtJS version 4.2.0.489 and I am having problems with FieldContainer when its LabelAlign property is set to "Top" and LayoutConfig property set to "Anchor". I can't seem to anchor the component inside the FieldContainer to 100%. Setting the width explicitly doesn't change anything either.




<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<ext:Panel runat="server" Height="500" Width="500">
<LayoutConfig>
<ext:AnchorLayoutConfig>
</ext:AnchorLayoutConfig>
</LayoutConfig>
<Items>
<ext:FieldContainer runat="server" FieldLabel="Combo Box" LabelAlign="Top" Anchor="100%">
<LayoutConfig>
<ext:AnchorLayoutConfig>
</ext:AnchorLayoutConfig>
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" Anchor="100%">
</ext:ComboBox>
</Items>
</ext:FieldContainer>
</Items>
</ext:Panel>
</form>
</body>
</html>

Vladimir
Feb 26, 2013, 3:33 PM
Hi,

Thanks for the report. I reproduced the bug in pure ExtJS sample also
Here is bug report
http://www.sencha.com/forum/showthread.php?257381-4.2.0.489-FieldContainer-labelAlign-quot-top-quot-and-anchor-layout-doesn-t-resize-items

At this moment, I can suggest to use Form layout


<ext:Panel runat="server" Height="500" Width="500" Layout="FormLayout">
<Items>
<ext:FieldContainer runat="server" FieldLabel="Combo Box" LabelAlign="Top" Layout="FormLayout">
<Items>
<ext:TextField runat="server">
</ext:TextField>
</Items>
</ext:FieldContainer>
</Items>
</ext:Panel>

geoffrey.mcgill
Feb 26, 2013, 4:00 PM
A defect ticket has been created to track this issue.

https://github.com/extnet/Ext.NET/issues/153

stratadev
Feb 26, 2013, 4:06 PM
Thanks for the prompt reply. The temporary fix you gave me works in Ext.Net. But I'm actually doing this in pure ExtJS, seems like they do not have Form Layout anymore, is that correct?


Hi,

Thanks for the report. I reproduced the bug in pure ExtJS sample also
Here is bug report
http://www.sencha.com/forum/showthread.php?257381-4.2.0.489-FieldContainer-labelAlign-quot-top-quot-and-anchor-layout-doesn-t-resize-items

At this moment, I can suggest to use Form layout


<ext:Panel runat="server" Height="500" Width="500" Layout="FormLayout">
<Items>
<ext:FieldContainer runat="server" FieldLabel="Combo Box" LabelAlign="Top" Layout="FormLayout">
<Items>
<ext:TextField runat="server">
</ext:TextField>
</Items>
</ext:FieldContainer>
</Items>
</ext:Panel>

Vladimir
Feb 26, 2013, 4:10 PM
Latest versions of ExtJS have Form layout already
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Form

stratadev
Feb 26, 2013, 4:40 PM
Oh, thanks, the Ext JS 3 Compatibility Layer was throwing an deprecate error so I was confused:

'Form layout no longer exists, use a different container layout and allow each field's Field layout to apply labels. Falling back to anchor layout.'

Anyway, thanks for your help!


Latest versions of ExtJS have Form layout already
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Form

Daniil
Mar 04, 2013, 1:33 PM
Oh, thanks, the Ext JS 3 Compatibility Layer was throwing an deprecate error so I was confused:

'Form layout no longer exists, use a different container layout and allow each field's Field layout to apply labels. Falling back to anchor layout.'

Anyway, thanks for your help!

As far as I can remember, the FormLayout was removed in ExtJS 4.0, not restored in ExtJS 4.1. So, maybe, are you using a compatibility script for ExtJS 4.0?

Baidaly
Mar 15, 2013, 3:44 AM
Hello!

It should be fixed in SVN and included to the next release (v2.2).