[CLOSED] how to set tabpanel align center in the screen

  1. #1

    [CLOSED] how to set tabpanel align center in the screen

    below is my layout, the tabpanel is on the top left of the window,how to set it center in the screen.also set the window in the panel which in the tabpanel.
    Click image for larger version. 

Name:	1.jpg 
Views:	21 
Size:	54.7 KB 
ID:	6158
    maybe some layout propery is not appropriate
    below is my code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="extdemo.pages.login" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>用户注册-crm客户关系系统</title>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Margins="0 0 10 0" >
                <Items>
                    <ext:TabPanel runat="server" Width="450" Height="250">
                        <Items>
                            <ext:Panel ID="Panel1" runat="server" Title="登陆">
                                <Items>
                                    <ext:Window
                                        ID="Window1"
                                        runat="server"
                                        Closable="false"
                                        Resizable="false"
                                        Height="150"
                                        Icon="Lock"
                                        Title="用户登陆"
                                        Draggable="false"
                                        Width="350"
                                        Modal="true"
                                        BodyPadding="5"
                                        Layout="FormLayout" DefaultButton="btnLogin">
                                        <Items>
                                            <ext:TextField
                                                ID="txtUsername"
                                                runat="server"
                                                FieldLabel="用户名"
                                                AllowBlank="false"
                                                BlankText="请输入用户名">
                                                <Listeners>
                                                    <AfterRender Handler="#{txtUsername}.focus(false,200);">
                                                    </AfterRender>
                                                </Listeners>
                                            </ext:TextField>
                                            <ext:TextField
                                                ID="txtPassword"
                                                runat="server"
                                                InputType="Password"
                                                FieldLabel="密码"
                                                AllowBlank="false"
                                                BlankText="请输入密码" />
                                        </Items>
                                        <Buttons>
                                            <ext:Button ID="Button1" runat="server" Text="注册" Icon="UserAdd">
                                                <DirectEvents>
                                                    <Click OnEvent="reg_event"></Click>
                                                </DirectEvents>
                                            </ext:Button>
                                            <ext:Button ID="btnLogin" runat="server" Text="登陆" Icon="Accept">
                                                <DirectEvents>
                                                    <Click OnEvent="btnLogin_Click">
                                                        <EventMask ShowMask="true" Msg="正在验证..." MinDelay="500" />
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
    
                                        </Buttons>
                                    </ext:Window>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="Panel2" runat="server" Title="注册">
                                <Items>
                                    <ext:Window ID="Window2" runat="server" Layout="FormLayout" Title="注册" Width="350">
                                        <Items>
                                            <ext:TextField ID="TextField1" FieldLabel="用户名" runat="server"></ext:TextField>
                                        </Items>
                                    </ext:Window>
                                </Items>
                            </ext:Panel>
    
                        </Items>
                    </ext:TabPanel>
                    
    
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    thanks.
    Last edited by Daniil; May 09, 2013 at 3:57 AM. Reason: [CLOSED]
  2. #2
    Hi @hdsoso,

    how to set it center in the screen
    Please set up the following for the Viewport.
    <LayoutConfig>
        <ext:HBoxLayoutConfig Pack="Center" />
    </LayoutConfig>
    also set the window in the panel which in the tabpanel.
    I would avoid placing a Windows to an Items collection. What about to use a Panel instead?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @hdsoso,



    Please set up the following for the Viewport.
    <LayoutConfig>
        <ext:HBoxLayoutConfig Pack="Center" />
    </LayoutConfig>


    I would avoid placing a Windows to an Items collection. What about to use a Panel instead?
    it's now Centered horizontally, but on the top of the window , is there any easy way to set Centered vertically and Centered horizontally?
  4. #4
    You can use a VBoxLayout to centralize vertically. You can use an additional Container.

Similar Threads

  1. Replies: 2
    Last Post: Jun 23, 2012, 2:17 PM
  2. [CLOSED] IE6 - Right align & adjust screen issue
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 01, 2012, 5:49 AM
  3. Replies: 5
    Last Post: Nov 14, 2011, 9:28 AM
  4. Windows always on the center of screen
    By reiben in forum 1.x Help
    Replies: 1
    Last Post: Dec 09, 2010, 11:56 AM
  5. [CLOSED] Center windown on screen, not absolute
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 25, 2010, 10:12 PM

Posting Permissions