What's New?

[CLOSED] Component setWidth() causes a layout problem

  1. #1
    May 10, 2013, 8:50 PM

    [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.

    <%@ 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>
    Last edited by Daniil; May 13, 2013 at 3:05 PM. Reason: [CLOSED]
  2. #2
    May 10, 2013, 9:34 PM
    Hello!

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

    <%@ 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>
  3. #3
    May 11, 2013, 3:24 AM
    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.
  4. #4
    May 11, 2013, 4:04 AM
    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.

    <%@ 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>
    Last edited by vadym.f; May 12, 2013 at 5:34 PM.
  5. #5
    May 13, 2013, 4:47 AM
    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.
    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.
  6. #6
    May 13, 2013, 11:56 AM
    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.

    <%@ 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>

Similar Threads

  1. Help on setting up links in the layout component
    By jcontreras in forum 2.x Help
    Replies: 5
    Last Post: Mar 27, 2013, 9:06 PM
  2. [CLOSED] Component Column layout Issues
    By RCM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 28, 2012, 2:58 PM
  3. [CLOSED] Problem with “HtmlEditor” component in IE
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 26, 2012, 9:00 PM
  4. [CLOSED] Component focus problem in the rowExpander
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Jan 18, 2012, 7:42 AM
  5. [OPEN] Problem designing component inside coolite layout
    By GillouX in forum Bugs
    Replies: 1
    Last Post: Oct 10, 2008, 10:28 PM

Tags for this Thread

Posting Permissions