[CLOSED] [#153] FieldContainer LabelAlign "Top" with AnchorLayout

Printable View

Feb 26, 2013, 2:00 PM
stratadev

[CLOSED] [#153] FieldContainer LabelAlign "Top" with AnchorLayout

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.

Code:

<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>
Feb 26, 2013, 2:33 PM
Vladimir

Hi,

Thanks for the report. I reproduced the bug in pure ExtJS sample also
Here is bug report
http://www.sencha.com/forum/showthre...t-resize-items

At this moment, I can suggest to use Form layout

Code:

<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>
Feb 26, 2013, 3:00 PM
geoffrey.mcgill

A defect ticket has been created to track this issue.

https://github.com/extnet/Ext.NET/issues/153
Feb 26, 2013, 3:06 PM
stratadev

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?

Quote:

Originally Posted by Vladimir

Hi,

Thanks for the report. I reproduced the bug in pure ExtJS sample also
Here is bug report
http://www.sencha.com/forum/showthre...t-resize-items

At this moment, I can suggest to use Form layout

Code:

<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>
Feb 26, 2013, 3:10 PM
Vladimir

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

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!

Quote:

Originally Posted by Vladimir

Latest versions of ExtJS have Form layout already
http://docs.sencha.com/ext-js/4-1/#!...container.Form
Mar 04, 2013, 12:33 PM
Daniil

Quote:

Originally Posted by stratadev

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?
Mar 15, 2013, 2:44 AM
Baidaly

Hello!

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