[CLOSED] Component setWidth() causes a layout problem

Hi,

Please consider the code sample below. When the TextField has its width modified (button click), I'd like the rest of the controls in the CompositeField to shift appropriately in order to occupy the space released. Unfortunately, that doesn't happen and I was unable to enlist the help of doLayout() to remove the space gap created.

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var resize = function () { if (TextPostalCode.getWidth() == 270) { TextPostalCode.setWidth(150); DisplayFieldZipExtensionDash.show(); TextFieldZipExtension.show(); } else { TextPostalCode.setWidth(270); DisplayFieldZipExtensionDash.hide(); TextFieldZipExtension.hide(); } // These calls don't work CompositeField1.doLayout(); FormPanel1.doLayout(); Panel1.doLayout(); ViewPort1.doLayout(); }; </script> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <form id="Form1" runat="server"> <ext:Viewport ID="ViewPort1" Layout="BorderLayout" runat="server"> <Items> <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Layout="FitLayout" AutoScroll="false"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" LabelAlign="Left" Padding="10" ButtonAlign="Left" AutoScroll="false" Title="Details" Border="true" Frame="false" TrackResetOnLoad="true"> <Items> <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Postal Code"> <Items> <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true" ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270"> </ext:TextField> <ext:DisplayField ID="DisplayFieldZipExtensionDash" runat="server" Text="-" Hidden="true"> </ext:DisplayField> <ext:TextField ID="TextFieldZipExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="106" Hidden="true"> </ext:TextField> <ext:ToolbarSpacer Width="40"> </ext:ToolbarSpacer> <ext:DisplayField runat="server" Text="Phone:" Width="90"> </ext:DisplayField> <ext:TextField ID="TextPhone" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="120"> </ext:TextField> <ext:ToolbarSpacer Width="10"> </ext:ToolbarSpacer> <ext:DisplayField runat="server" Text="Extension:" Width="60"> </ext:DisplayField> <ext:TextField ID="TextPhoneExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="65"> </ext:TextField> </Items> </ext:CompositeField> </Items> <Buttons> <ext:Button runat="server" Text="Resize"> <Listeners> <Click Handler="resize();" /> </Listeners> </ext:Button> </Buttons> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>

Hello!

In this case it's better to use HBoxLayout. Try the following:

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var resize = function () { if (!DisplayFieldZipExtensionDash.isVisible()) { TextPostalCode.setWidth(150); DisplayFieldZipExtensionDash.show(); TextFieldZipExtension.show(); } else { TextPostalCode.setWidth(270); DisplayFieldZipExtensionDash.hide(); TextFieldZipExtension.hide(); } // These calls don't work CompositeField1.doLayout(); FormPanel1.doLayout(); Panel1.doLayout(); ViewPort1.doLayout(); }; </script> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <form id="Form1" runat="server"> <ext:Viewport ID="ViewPort1" Layout="BorderLayout" runat="server"> <Items> <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Layout="FitLayout" AutoScroll="false"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" LabelAlign="Left" Padding="10" ButtonAlign="Left" AutoScroll="false" Title="Details" Border="true" Frame="false" TrackResetOnLoad="true"> <Items> <ext:Container ID="CompositeField1" runat="server" FieldLabel="Postal Code" Layout="HBox"> <LayoutConfig> <ext:HBoxLayoutConfig Align="StretchMax" /> </LayoutConfig> <Items> <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true" ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270"> </ext:TextField> <ext:DisplayField ID="DisplayFieldZipExtensionDash" runat="server" Text="-" Hidden="true"> </ext:DisplayField> <ext:TextField ID="TextFieldZipExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="106" Hidden="true"> </ext:TextField> <ext:ToolbarSpacer Width="40"> </ext:ToolbarSpacer> <ext:DisplayField runat="server" Text="Phone:" Width="90"> </ext:DisplayField> <ext:TextField ID="TextPhone" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="120"> </ext:TextField> <ext:ToolbarSpacer Width="10"> </ext:ToolbarSpacer> <ext:DisplayField runat="server" Text="Extension:" Width="60"> </ext:DisplayField> <ext:TextField ID="TextPhoneExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="65"> </ext:TextField> </Items> </ext:Container> </Items> <Buttons> <ext:Button runat="server" Text="Resize"> <Listeners> <Click Handler="resize();" /> </Listeners> </ext:Button> </Buttons> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>

Thanks for your quick response Daulet!

In your example, the call to setWidth() doesn't seem to have any visual effect although getWidth() does report the correct width after the invocation.

ToolbarLayout is working quite a bit better although not without some minor glitches:

Edit in: I still have to guess and adjust the width of some elements so that it doesn't get shifted. Probably, this isn't the best solution.

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var resize = function () { if (!DisplayFieldZipExtensionDash.isVisible()) { TextPostalCode.setWidth(160); DisplayFieldZipExtensionDash.show(); TextFieldZipExtension.show(); } else { TextPostalCode.setWidth(270); DisplayFieldZipExtensionDash.hide(); TextFieldZipExtension.hide(); } // These calls don't work //CompositeField1.doLayout(); //FormPanel1.doLayout(); //Panel1.doLayout(); //ViewPort1.doLayout(); }; </script> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <form id="Form1" runat="server"> <ext:Viewport ID="ViewPort1" Layout="BorderLayout" runat="server"> <Items> <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Layout="FitLayout" AutoScroll="false"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" LabelAlign="Left" Padding="10" ButtonAlign="Left" AutoScroll="false" Title="Details" Border="true" Frame="false" TrackResetOnLoad="true"> <Items> <ext:Container ID="CompositeField1" runat="server" FieldLabel="Postal Code" Layout="ToolbarLayout"> <Items> <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true" ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270"> </ext:TextField> <ext:DisplayField ID="DisplayFieldZipExtensionDash" runat="server" Text="-" Hidden="true"> </ext:DisplayField> <ext:TextField ID="TextFieldZipExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="106" Hidden="true"> </ext:TextField> <ext:ToolbarSpacer Width="40"> </ext:ToolbarSpacer> <ext:DisplayField ID="DisplayField1" runat="server" Text="Phone:" Width="90"> </ext:DisplayField> <ext:TextField ID="TextPhone" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="120"> </ext:TextField> <ext:ToolbarSpacer Width="10"> </ext:ToolbarSpacer> <ext:DisplayField ID="DisplayField2" runat="server" Text="Extension:" Width="60"> </ext:DisplayField> <ext:TextField ID="TextPhoneExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="65"> </ext:TextField> </Items> </ext:Container> </Items> <Buttons> <ext:Button ID="Button1" runat="server" Text="Resize"> <Listeners> <Click Handler="resize();" /> </Listeners> </ext:Button> </Buttons> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>

Hi Vadym,

It looks a bug within ExtJS and I am not sure why I have not met it before (maybe, I forgot...).

A setWidth() call changes an element's width, but doesn't set up its width property. But an HBox layout uses the width property calculating sizes of its items.

Setting up the width property directly helps remedy the problem.

Code:

if (TextPostalCode.getWidth() == 270) { TextPostalCode.width = 150; TextPostalCode.setWidth(150); DisplayFieldZipExtensionDash.show(); TextFieldZipExtension.show(); }

There is, probably, the same problem with a VBox and the height property.

I am reluctant to change anything regarding this in Ext.NET v1 to avoid breaking of something else, but it appears to be fixed in Ext.NET v2.

Thank you very much Daniil! Your workaround works pretty well with a CompositeField, too. I believe setting the width property explicitly is the major catch here. Please mark this thread as closed.

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var resize = function () { if (!DisplayFieldZipExtensionDash.isVisible()) { TextPostalCode.setWidth(160); TextPostalCode.width = 160; DisplayFieldZipExtensionDash.show(); TextFieldZipExtension.show(); } else { TextPostalCode.setWidth(270); TextPostalCode.width = 270; DisplayFieldZipExtensionDash.hide(); TextFieldZipExtension.hide(); } CompositeField1.doLayout(); }; </script> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <form id="Form1" runat="server"> <ext:Viewport ID="ViewPort1" Layout="BorderLayout" runat="server"> <Items> <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Layout="FitLayout" AutoScroll="false"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" LabelAlign="Left" Padding="10" ButtonAlign="Left" AutoScroll="false" Title="Details" Border="true" Frame="false" TrackResetOnLoad="true"> <Items> <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Postal Code"> <Items> <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true" ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270"> </ext:TextField> <ext:DisplayField ID="DisplayFieldZipExtensionDash" runat="server" Text="-" Hidden="true" Width="5"> </ext:DisplayField> <ext:TextField ID="TextFieldZipExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="95" Hidden="true"> </ext:TextField> <ext:ToolbarSpacer Width="40"> </ext:ToolbarSpacer> <ext:DisplayField ID="DisplayField1" runat="server" Text="Phone:" Width="90"> </ext:DisplayField> <ext:TextField ID="TextPhone" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="120"> </ext:TextField> <ext:ToolbarSpacer Width="10"> </ext:ToolbarSpacer> <ext:DisplayField ID="DisplayField2" runat="server" Text="Extension:" Width="60"> </ext:DisplayField> <ext:TextField ID="TextPhoneExtension" runat="server" SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="65"> </ext:TextField> </Items> </ext:CompositeField> </Items> <Buttons> <ext:Button ID="Button1" runat="server" Text="Resize"> <Listeners> <Click Handler="resize();" /> </Listeners> </ext:Button> </Buttons> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>