PDA

View Full Version : [CLOSED] TabPosition="Right" error



hdsoso
May 07, 2013, 2:38 PM
hello, I want to tabpanel to set tabs align vertical ,so I add TabPosition="Right" property to the tabpanel , the page shows a blank page.
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>
<link href="../images/style.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>

<ext:Viewport ID="Viewport1" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server" Border="False" Height="900">
<LayoutConfig>
<ext:VBoxLayoutConfig Pack="Center"></ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server" Border="False">
<Content>
<h2 class="hdsoso_title">crm客户关系系统</h2>
</Content>
</ext:Panel>
<ext:TabPanel runat="server" Width="350" ID="ctl344" TabPosition="Right">/////it's here

<Items>
<ext:Panel ID="Panel1" runat="server" Title="登陆" BodyPadding="5">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel
ID="Window1"
runat="server"
Closable="false"
Resizable="false"
Title="用户登陆"
Draggable="false"
Width="330"
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="btnLogin" runat="server" Text="登陆" Icon="DoorIn">
<DirectEvents>
<Click OnEvent="btnLogin_Click">
<EventMask ShowMask="true" Msg="正在验证..." MinDelay="500" />
</Click>
</DirectEvents>
</ext:Button>

</Buttons>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="注册" BodyPadding="5" Width="330">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel ID="Window2" runat="server" Layout="FormLayout" Title="用户注册" Width="330" BodyPadding="5">
<Defaults>
<ext:Parameter Name="LabelWidth" Value="125" Mode="Raw" />
</Defaults>
<Items>
<ext:TextField ID="txtEmail" FieldLabel="邮箱" runat="server" Vtype="email"></ext:TextField>
<ext:TextField ID="txtname" FieldLabel="用户名" runat="server"></ext:TextField>
<ext:TextField ID="txtpass" FieldLabel="密码" runat="server">
<Plugins>
<ext:PasswordMask ID="PasswordMask1" runat="server" />

<ext:CapsLockDetector ID="CapsLockDetector1" runat="server">
<Listeners>
<CapsLockOn Handler="#{txtpass}.showIndicator({iconCls : '#Error', tip : '大写锁定已打开'});" />
<CapsLockOff Handler="#{txtpass}.hideIndicator();" />
</Listeners>
</ext:CapsLockDetector>
</Plugins>
<Listeners>
<ValidityChange Handler="this.next().validate();" />
<Blur Handler="this.next().validate();" />
</Listeners>
</ext:TextField>
<ext:TextField ID="txtpass1" FieldLabel="确认密码" runat="server" AnchorHorizontal="100%" VtypeText="密码不一致" Vtype="password">
<Plugins>
<ext:PasswordMask ID="PasswordMask2" runat="server" />
</Plugins>
<CustomConfig>
<ext:ConfigItem Name="initialPassField" Value="txtpass" Mode="Value" />
</CustomConfig>
</ext:TextField>
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="注册" Icon="UserAdd"></ext:Button>
</Buttons>
</ext:Panel>
</Items>
</ext:Panel>

</Items>
</ext:TabPanel>
</Items>
</ext:Panel>



</Items>
</ext:Viewport>
</form>
</body>
</html>



thanks.

Daniil
May 07, 2013, 4:10 PM
Hi @hdsoso,

A VBoxLayout expects Height or Flex of its items.

You should set up either Height or Flex setting for the Panels which are items of the Panel with a VBoxLayout.

A similar thing for an HBoxLayout. It expects Width or Flex.

hdsoso
May 08, 2013, 1:50 AM
Hi @hdsoso,

A VBoxLayout expects Height or Flex of its items.

You should set up either Height or Flex setting for the Panels which are items of the Panel with a VBoxLayout.

A similar thing for an HBoxLayout. It expects Width or Flex.

I will have a try,may be I need more detail explain ,
you mean panel with VBoxLayout must have height property or items(such as panel) in the panel with VBoxLayout must have height property?
can you modify the codes above directly so I can understand you?
if TabPosition is top or bottom, the page is loaded correctly,but if TabPosition is left or right, the page is shown as blank page. may be the width is narrow? I have tried to set width wider,it can not work also.
thanks a lot.

Daniil
May 08, 2013, 3:42 AM
There is the Panel with VBoxLayoutConfig.

There are the Panel and the TabPanel inside. Please set up, for example, Height="50" for that Panel (which contains <h2>) and Height="200" for the TabPanel.