What's New?

[CLOSED] How to align window content as center

  1. #1
    May 16, 2014, 10:34 AM

    [CLOSED] How to align window content as center

    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>
    Attached Thumbnails Click image for larger version.  Name: V1.7_CenterAlignment.GIF  Views: 33  Size: 21.0 KB  ID: 11131   Click image for larger version.  Name: V2.5_CenterAlignment_issue.GIF  Views: 33  Size: 17.0 KB  ID: 11141  
    Last edited by Daniil; May 19, 2014 at 5:21 AM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    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.
  4. #4
    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>
  5. #5
    May 16, 2014, 4:28 PM
    Thanks issues has been resolved.
    You can close this thread.

Similar Threads

  1. [CLOSED] VBoxLayout Align Center
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 05, 2016, 4:15 PM
  2. [CLOSED] Align notification box center of the screen
    By Maitreya in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 25, 2013, 3:50 PM
  3. [CLOSED] how to set tabpanel align center in the screen
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 06, 2013, 11:22 AM
  4. [CLOSED] How to center align the buttons
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 21, 2013, 8:31 PM
  5. Align GridPanel Center. [BUG]
    By hugo.carvalho in forum 1.x Help
    Replies: 2
    Last Post: Aug 11, 2009, 10:26 AM

Posting Permissions