[CLOSED] TabPosition="Right" error

  1. #1

    [CLOSED] TabPosition="Right" error

    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.
    Last edited by Daniil; May 14, 2013 at 3:33 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Quote Originally Posted by Daniil View Post
    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.
    Last edited by hdsoso; May 08, 2013 at 1:52 AM.
  4. #4
    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.

Similar Threads

  1. Replies: 7
    Last Post: Nov 21, 2012, 7:34 PM
  2. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  3. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Posting Permissions