Printable View
In the following example the TextField inside Field2 should be stretched to fit the width, but it doesn't happen:
Code:Html.X().Panel()
.Layout(LayoutType.Form)
.Items(
Html.X().TextField()
.FieldLabel("Field1")
,
Html.X().FieldContainer()
.FieldLabel("Field2")
.Layout(LayoutType.HBox)
.Items(
Html.X().TextField().Flex(1)
)
)
Hello! Thanks for reporting this problem!
Seems that it has been a known issue in our underlying framework (Sencha ExtJS) for some time now. Details on the issue bound to this thread.
I've just created an issue with a little more details on the problem under number #1297. As soon as we have this fixed we'll be updating here with the news!
Thanks again!
EDIT: Please, wrap code you paste in [code ] and [/code ] tags. It makes the post & code look so much more nicer, readable and also provides a handy 'copy to clipboard' button. We're looking forward for you editing the other post where you pasted code without the tags (no, we are not going to ignore it no matter what!).
I see Sencha haven't fixed this, although the issue is now 1.5 years old.
Are there any workarounds? We'd like to upgrade from Ext.Net 2.5 to 4.1, but this is a major problem for us.
Hello!
Sencha does not seem to consider this a bug, although logged as one. They once stated that the form layout is intended only of fulfilling simple forms layouts. Whenever a form layout do not fit your needs, you have to fall over for the other available layouts.
So I believe that a good workaround for this is actually falling over for other layouts to make your view fit correctly.
Hello Fabricio!
We acquired the 4.1 license, despite this issue.
Looking at this reply on the Sencha forums, I've used ShrinkWrap="Height" to improve the situation. However, there's still an empty space at the end of the field container. Any ideas?
Here's a working example:
Code:<ext:ResourceManager runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:FormPanel ID="panelFilters" runat="server" AutoScroll="true" Region="Center" Title="SomeFilters" BodyPadding="5" MinWidth="400">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
</LayoutConfig>
<FieldDefaults LabelWidth="140"></FieldDefaults>
<Items>
<ext:FieldSet ID="criteriaGeneral" Collapsible="true" runat="server" Title="General" Layout="FormLayout">
<Items>
<ext:FieldContainer ID="FieldContainer1" runat="server" Layout="HBoxLayout" FieldLabel="Height" ShrinkWrap="Height">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:TextField ID="TextField1" runat="server" Flex="2"></ext:TextField>
<ext:TextField ID="TextField2" runat="server" Flex="3"></ext:TextField>
<ext:TextField ID="TextField3" runat="server" Flex="1"></ext:TextField>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer2" runat="server" Layout="HBoxLayout" FieldLabel="Default">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:TextField ID="TextField4" runat="server" Flex="2"></ext:TextField>
<ext:TextField ID="TextField5" runat="server" Flex="3"></ext:TextField>
<ext:TextField ID="TextField6" runat="server" Flex="1"></ext:TextField>
</Items>
</ext:FieldContainer>
</Items>
</ext:FieldSet>
</Items>
</ext:FormPanel>
</Items>
</ext:Viewport>
Hello!
It probably is not what you want, but changing the layout on your line 10 to VBoxLayout fixes the issue. At least for the sample you provided. As for it to work in a FormLayout, will need some changes in the layout building algorythm which could in turn bring forth other problems we just can't assess at this point, without further investigation.
EDIT: Changing your line 8's width to 70 seems to also address the issue. You may need to adjust the labelWidth to the fieldsets in order to allow the form to look right.
Obrigado FabrÃ*cio!
After some minor tweaks I managed to fix the page to display as in 2.5. Now on to the next 20 similar pages :)