PDA

View Full Version : [CLOSED] How to align window content as center



iansriley
May 16, 2014, 10:34 AM
Hi,

In Ext V2.5 window content is not aligning center (vertically and horizontal) . The same code is worked with V1.7 but not with V2.5.
Below is the code and attached images. With new version also the window content should be same like previous version, how to do that one.



<ext:Window ID="Window1" runat="server"
Title="Set Billing Dates"
Width="350"
Height="150"
Layout="FitLayout"
BodyStyle="background-color: white; padding:5px;"
ButtonAlign="Center"
Modal="true">
<Content>
<ext:Panel ID="panelSingleInstContracts" runat="server" Layout="VBoxLayout" ButtonAlign="Center" Frame="false" Border="false">
<Defaults>
<ext:Parameter Name="margins" Value="5 5 5 5" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Start" />
</LayoutConfig>
<Items>
<ext:Label runat="server" ID="lblSingleInstContracts" Text="Update the selected billing dates to the new issue date, or enter a different billing date for them."></ext:Label>
<ext:DateField ID="dfBillingDate" runat="server"
Vtype="daterange" SelectOnFocus="true" MaxLength="10">
</ext:DateField>
</Items>
</ext:Panel>
</Content>
<Buttons>
<ext:Button ID="btnSetToNewIssueDate" runat="server" Text="Set Billing Dates">
</ext:Button>
</Buttons>

</ext:Window>

Daniil
May 16, 2014, 10:47 AM
Hi @iansriley,

I am unable to keep the things exactly the same and achieve your requirement, but I tried to make as little changes as I can.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window
runat="server"
Title="Window"
Width="350"
Height="150"
Layout="FitLayout"
BodyStyle="background-color: white; padding: 5px;"
ButtonAlign="Center"
Modal="true">
<Items>
<ext:Panel
runat="server"
ButtonAlign="Center"
Frame="false"
Border="false">
<Defaults>
<ext:Parameter Name="margins" Value="5 5 5 5" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Label
runat="server"
Text="Update the selected billing dates to the new issue date, or enter a different billing date for them."
Flex="1"
/>

<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:DateField runat="server" Width="100" />
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Button" />
</Buttons>
</ext:Window>
</form>
</body>
</html>

iansriley
May 16, 2014, 11:14 AM
Thanks for quick reply. Your solution is working fine but when expand the window to right/left/top/bottom the Label content is not align to center, it is placing on top left corner. The label and date field should be center when we expand the window.

Thank you.

Daniil
May 16, 2014, 1:12 PM
Ok, that lays out better.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window
runat="server"
Title="Window"
Width="350"
Height="150"
Layout="FitLayout"
BodyStyle="background-color: white; padding: 5px;"
ButtonAlign="Center"
Modal="true">
<Items>
<ext:Panel
runat="server"
ButtonAlign="Center"
Frame="false"
Border="false">
<Defaults>
<ext:Parameter Name="margins" Value="5 5 5 5" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:Label
runat="server"
Text="Update the selected billing dates to the new issue date, or enter a different billing date for them."
StyleSpec="white-space: wrap; text-align: center;"
Margins="0 0 15 0"
/>
</Items>
</ext:Container>

<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:DateField runat="server" Width="100" />
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Button" />
</Buttons>
</ext:Window>
</form>
</body>
</html>

iansriley
May 16, 2014, 4:28 PM
Thanks issues has been resolved.
You can close this thread.