PDA

View Full Version : [CLOSED] layout problem?



hdsoso
May 16, 2013, 3:17 AM
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.

Daniil
May 16, 2013, 5:30 AM
Hi @hdsoso,

I don't understand well the requirements.

Please provide us with a mockup.

hdsoso
May 16, 2013, 5:58 AM
Hi @hdsoso,

I don't understand well the requirements.

Please provide us with a mockup.
plz see the attachment.
6227

Daniil
May 16, 2013, 6:36 AM
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.

hdsoso
May 16, 2013, 8:04 AM
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
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>

Daniil
May 16, 2013, 10:36 AM
You can add this for the Panel2.

<LayoutConfig>
<ext:HBoxLayoutConfig Pack="End" />
</LayoutConfig>

See also
http://examples2.ext.net/#/Layout/HBoxLayout/Basic/