PDA

View Full Version : [CLOSED] how to set tabpanel align center in the screen



hdsoso
May 05, 2013, 11:09 PM
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.
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.

Daniil
May 06, 2013, 6:05 AM
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?

hdsoso
May 06, 2013, 11:01 AM
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?

Daniil
May 06, 2013, 11:22 AM
You can use a VBoxLayout to centralize vertically. You can use an additional Container.