[CLOSED] layout problem?

  1. #1

    [CLOSED] layout problem?

    question :
    1. how to set element align center in the panel which layout is tablelayout. "align valign center" is align center in the panel.
    2. how to set element valign middle in the panel which layout is tablelayout. so that text and dropdown in the line.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pingzhengluru.aspx.cs" Inherits="TobrosCWT.pages.pingzheng.pingzhengluru" %>
    
    <!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>凭证录入</title>
        <link href="../../images/style.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server"></ext:ResourceManager>
            <ext:Viewport runat="server" Padding="10">
                <Items>
                    <ext:Button runat="server" Text="刷新" Icon="ArrowRefresh" Cls="mr5">
                        <Listeners>
                            <Click Handler="window.location='pingzhengluru.aspx'">
                            </Click>
                        </Listeners>
                    </ext:Button>
                     <ext:Button ID="Button1" runat="server" Text="保存并新增"  Cls="mr5"  Icon="ApplicationAdd"></ext:Button>
                     <ext:Button ID="Button2" runat="server" Text="保存" Icon="TableSave"></ext:Button>
                     <ext:Panel runat="server" Height="500" Layout="TableLayout" Flex="1" Cls="pingzheng" PaddingSpec="20px 20px;" Border="false">
                         
                         <Items>
                             <ext:Label runat="server" Text="凭证字" Cls="mr5" ></ext:Label>
                             <ext:ComboBox    InputWidth="60"   runat="server"   Cls="mr5">
                                 <Items>
                                     <ext:ListItem Text="付"/>
                                     <ext:ListItem Text="收"/>
                                     <ext:ListItem Text="记" />
                                 </Items>
                                 <SelectedItems>
                                      <ext:ListItem Text="记" />
                                 </SelectedItems>
                             </ext:ComboBox>
                            
                             <ext:NumberField Text="1"  InputWidth="60"  LabelAlign="Right"   runat="server"  Cls="mr5"></ext:NumberField>
                               <ext:Label ID="Label1" runat="server" Text="号" Cls="mr5"></ext:Label>
                             <ext:Label runat="server" Text="日期" Cls="mr5"></ext:Label>
                             <ext:DateField runat="server"  InputWidth="90"    LabelWidth="35"></ext:DateField>
                             <ext:Label runat="server" Flex="1"  Text="align valign center"   StyleSpec="font-size:30px;"  >
                                 
                             </ext:Label>
                             <ext:Label runat="server"   Text="附单据" Cls="mr5"></ext:Label>
                             <ext:NumberField runat="server"   InputWidth="60" EmptyText="0"></ext:NumberField>
                         </Items>
                     </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    thanks.
    Last edited by Daniil; May 21, 2013 at 3:44 AM. Reason: [CLOSED]
  2. #2
    Hi @hdsoso,

    I don't understand well the requirements.

    Please provide us with a mockup.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @hdsoso,

    I don't understand well the requirements.

    Please provide us with a mockup.
    plz see the attachment.
    Click image for larger version. 

Name:	QQ截图20130516135652.png 
Views:	18 
Size:	11.6 KB 
ID:	6227
  4. #4
    Thank you.

    1. Aligning the labels vertically.

    Well, it is already middle aligned. A ComboBox and other fields use "margin-bottom: 5px;" and it causes misalignment.

    Setting Cls="no-margin-bottom" for a ComboBox
    .no-margin-bottom {
        margin-bottom: 0px;
    }
    helps remedy the problem.

    2. "align valign center"

    Sorry, I do not understand where it should be. Could you demonstrate it on the mockup?

    3. Moving the last field to the right.

    Well, a TableLayout doesn't support "auto-stretching".

    You could set up some fixed width for the td element and align its content to the right.

    Set up this for the Label (the last one).
    CellCls="last-field"
    .last-field {
        text-align: right;
        width: 500px;
    }
    But I guess a fixed width is not you are looking for. If you need to align the things to the right according to the Panel's width, then a TableLayout can't do this. If so, you should use an HBoxLayout.
  5. #5
    hi
    I have changed table layout to ColumnLayout , because it can create three column , one left, one center and another right .
    center is a label
    but how to move last panel to right
    Click image for larger version. 

Name:	1.png 
Views:	12 
Size:	5.6 KB 
ID:	6229

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pingzhengluru.aspx.cs" Inherits="TobrosCWT.pages.pingzheng.pingzhengluru" %>
    
    <!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>凭证录入</title>
        <link href="../../images/style.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server"></ext:ResourceManager>
            <ext:Viewport runat="server" Padding="10">
                <Items>
                    <ext:Button runat="server" Text="刷新" Icon="ArrowRefresh" Cls="mr5">
                        <Listeners>
                            <Click Handler="window.location='pingzhengluru.aspx'">
                            </Click>
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button1" runat="server" Text="保存并新增" Cls="mr5" Icon="ApplicationAdd"></ext:Button>
                    <ext:Button ID="Button2" runat="server" Text="保存" Icon="TableSave"></ext:Button>
                    <ext:Panel runat="server" Cls="pingzheng" Layout="ColumnLayout" Flex="1" PaddingSpec="20px 20px;" Border="false">
    
                        <Items>
                            <ext:Panel runat="server" ColumnWidth=".3" Height="36" Layout="HBoxLayout" Border="false">
                                <Items>
                                    <ext:Label ID="Label1" runat="server" Text="凭证字" Cls="mr5"></ext:Label>
                                    <ext:ComboBox ID="ComboBox1" InputWidth="60" runat="server" Cls="mr5">
                                        <Items>
                                            <ext:ListItem Text="付" />
                                            <ext:ListItem Text="收" />
                                            <ext:ListItem Text="记" />
                                        </Items>
                                        <SelectedItems>
                                            <ext:ListItem Text="记" />
                                        </SelectedItems>
                                    </ext:ComboBox>
    
                                    <ext:NumberField ID="NumberField1" Text="1" InputWidth="60" LabelAlign="Right" runat="server" Cls="mr5"></ext:NumberField>
                                    <ext:Label ID="Label2" runat="server" Text="号" Cls="mr5"></ext:Label>
                                    <ext:Label ID="Label3" runat="server" Text="日期" Cls="mr5"></ext:Label>
                                    <ext:DateField ID="DateField1" runat="server" InputWidth="90" LabelWidth="35"></ext:DateField>
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" ColumnWidth=".4" StyleSpec="text-align:center;" Border="false">
                                <Items>
                                    <ext:Label ID="Label4" runat="server" Text="align valign center" StyleSpec="font-size:30px;"></ext:Label>
                                </Items>
                            </ext:Panel>
                             
                            <ext:Panel CellCls="last-field" ID="Panel2" Height="36" runat="server" ColumnWidth=".3" StyleSpec="text-align:right;" Layout="HBoxLayout" Border="false">
                                <Items>
                                    <ext:Label ID="Label5" runat="server" Text="附单据" Cls="mr5"></ext:Label>
                                    <ext:NumberField ID="NumberField2" runat="server" InputWidth="60" EmptyText="0"></ext:NumberField>
                                </Items>
                            </ext:Panel>
     
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    You can add this for the Panel2.
    <LayoutConfig>
        <ext:HBoxLayoutConfig Pack="End" />
    </LayoutConfig>
    See also
    https://examples2.ext.net/#/Layout/HBoxLayout/Basic/

Similar Threads

  1. gridpanel layout problem
    By John_Writers in forum 2.x Help
    Replies: 1
    Last Post: Apr 20, 2013, 3:22 AM
  2. [CLOSED] Layout problem in TabPanel
    By paulc in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Feb 19, 2013, 5:15 PM
  3. Layout Problem
    By bilgibilisim in forum 2.x Help
    Replies: 0
    Last Post: Oct 23, 2012, 10:36 AM
  4. Height layout problem
    By jansssson in forum 1.x Help
    Replies: 3
    Last Post: Jan 26, 2011, 10:04 AM
  5. Portlet ,Fit Layout problem
    By kiran malgi in forum 1.x Help
    Replies: 0
    Last Post: Jun 01, 2010, 3:05 AM

Posting Permissions