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