EXT.NET (三)布局-X,Y 轴

最新推荐文章于 2025-07-22 00:16:16 发布

最新推荐文章于 2025-07-22 00:16:16 发布 · 111 阅读

文章标签：

#xhtml

对于布局一直是很麻烦的事情，今天在官方网站看到这样的一个例子是不是感觉布局又多一种了；

上图：

看看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Form with AbsoluteLayout - Ext.NET Examples</title> <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* Custom rule to make the toolbar fit within a framed panel with no margin: */ .email-form .x-panel-mc .x-panel-tbar .x-toolbar { border-top: 1px solid #C2D6EF; border-left: 1px solid #C2D6EF; border-bottom: 1px solid #99BBE8; margin: -5px -4px 0; } </style> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" Layout="Fit"> <Items> <ext:Panel runat="server" Header="false" Border="false" Padding="15" Layout="Fit"> <Items> <ext:Panel runat="server" Title="New Email" Cls="email-form" Frame="true" BodyStyle="10px 5px 5px;" Layout="Fit"> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:Button runat="server" Text="Send" Icon="EmailGo" /> <ext:Button runat="server" Text="Save" Icon="Disk" /> <ext:Button runat="server" Text="Check Spelling" Icon="Spellcheck" /> <ext:Button runat="server" Text="Print" Icon="Printer" /> <ext:ToolbarFill runat="server" /> <ext:Button runat="server" Text="Attach a File" Icon="PageAttach" /> </Items> </ext:Toolbar> </TopBar> <Items> <ext:Panel runat="server" BaseCls="x-plain" Border="true" Layout="Absolute"> <Items> <ext:Label runat="server" X="0" Y="15" Text="From:" /> <ext:TextField runat="server" X="55" Y="10" AnchorHorizontal="100%" /> <ext:Label runat="server" X="0" Y="42" Text="To:" /> <ext:Button runat="server" Text="Contacts..." X="55" Y="37" /> <ext:TextField runat="server" X="135" Y="37" AnchorHorizontal="100%" /> <ext:Label runat="server" X="0" Y="69" Text="Subject:" /> <ext:TextField runat="server" X="55" Y="64" AnchorHorizontal="100%" /> <ext:TextArea runat="server" X="0" Y="91" AnchorHorizontal="100%" AnchorVertical="100%" /> </Items> </ext:Panel> </Items> </ext:Panel> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>

左边顶部向下X 向右Y轴布局