EXT.NET的布局方式

最新推荐文章于 2019-07-11 10:18:47 发布
最新推荐文章于 2019-07-11 10:18:47 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： 前段框架之EXT.NET 文章标签： EXT.NET布局模式 layout 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangcailian/article/details/41801971
版权

一、BorderLayout布局方式

BorderLayout布局方式：边框式布局方式，他是通过设置控件的Region属性来确定控件的布局

<ext:Window runat="server" ID="borderWin" Title="BorderLayout布局方式" Width="600" Height="400" Layout="BorderLayout">
                <Items>
                    <ext:Panel ID="panNorth" runat="server" Collapsible="true" Header="true" Title="北" HeaderPosition="Top" Region="North" Width="50" Height="100">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="panSourth" runat="server" Collapsible="true" Header="true" Title="南" HeaderPosition="Top" Region="South" Height="100">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="panWest" runat="server" Collapsible="true" Header="true" Title="西" HeaderPosition="Top" Region="West" Width="100">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="panEast" runat="server" Collapsible="true" Header="true" Title="东" HeaderPosition="Top" Region="East" Width="100">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:TabPanel ID="panCenter" runat="server" Collapsible="true" Header="true" Title="中" HeaderPosition="Top" Region="Center">
                        <Items>
                            <ext:Panel runat="server" Title="panel1">
                                <Items>
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="panel2">
                                <Items>
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="panel3">
                                <Items>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Window>

二、AnchorLayout布局方式

AnchorLayout布局方式也称为锚布局方式，它只支持用AnchorHorizontal（锚水平）和AnchorVertical（锚垂直）进行布局的布局方式
 
<ext:Window runat="server" ID="anchorWin" Title="AnchorLayout布局方式" Width="600" Height="400" Layout="AnchorLayout"
                BodyPadding="5" ButtonAlign="Center" DefaultButton="btnSend">
                <Tpl runat="server">
                    
                </Tpl>
                <Items>
                    <ext:TextField runat="server" ID="txtRevName" FieldLabel="收件人" AnchorHorizontal="100%" />
                    <ext:TextField runat="server" ID="txtTheme" FieldLabel="主题" AnchorHorizontal="100%" />
                    <ext:TextArea runat="server" ID="txtContent" AnchorHorizontal="100%" AnchorVertical="-50" />
                </Items>
                <Buttons>
                    <ext:Button runat="server" ID="btnSend" Text="发送" Icon="Mail" />
                    <ext:Button runat="server" ID="btnCacel" Text="取消" Icon="Cancel" />
                </Buttons>
            </ext:Window>

三、AbsoluteLayout布局方式

AbsoluteLayout布局方式也称为绝对布局方式，它主要采用X,Y坐标进行布局，同时也支持AnchorHorizontal（锚水平）和AnchorVertical（锚垂直）进行布局
 
<ext:Viewport ID="Viewport1" runat="server" Layout="AbsoluteLayout">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Height="300" Title="Panel1">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server" Height="300" Title="Panel2" X="50" Y="50" Layout="AbsoluteLayout" AnchorHorizontal="100%">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text="这是一个Lable">
                            </ext:Label>
                            <ext:TextField ID="TextField1" runat="server" Text="这是一个TextField" X="100" AnchorHorizontal="50%">
                            </ext:TextField>
                            <ext:Button ID="Button1" runat="server" Text="这是一个Button" X="200" Y="25">
                            </ext:Button>
                            <ext:TextArea ID="TextArea1" runat="server" Text="这是一个TextArea" Y="50" AnchorHorizontal="100%" AnchorVertical="100%">
                            </ext:TextArea>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>

四、AccordionLayout布局方式

AccordionLayout布局方式也称为手风琴布局方式
 
<ext:Viewport ID="Viewport1" runat="server" Layout="ColumnLayout">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Height="300" Title="Panel1" X="50" Y="50" Layout="AccordionLayout"
                        AnchorHorizontal="-50">
                        <Items>
                            <ext:Panel ID="Panel2" runat="server" Height="300" Title="列表1">
                                <Items>
                                    <ext:TabPanel ID="TabPanel1" runat="server" Height="300">
                                        <Items>
                                            <ext:Panel ID="Panel4" runat="server" Title="Tab 1">
                                                <Items>
                                                </Items>
                                            </ext:Panel>
                                            <ext:Panel ID="Panel5" runat="server" Title="Tab 2">
                                                <Items>
                                                </Items>
                                            </ext:Panel>
                                            <ext:Panel ID="Panel6" runat="server" Title="Tab 3">
                                                <Items>
                                                </Items>
                                            </ext:Panel>
                                        </Items>
                                    </ext:TabPanel>
                                </Items>
                            </ext:Panel>
                            <ext:TreePanel ID="treePanel2" runat="server" RootVisible="false" Title="图书列表">
                                <Root>
                                    <ext:Node Text="root">
                                        <Children>
                                            <ext:Node Text="阅读类" Expanded="true">
                                                <Children>
                                                    <ext:Node Text="知音杂志" Icon="Book" Leaf="true" />
                                                    <ext:Node Text="粤西越美" Icon="Book" Leaf="true" />
                                                    <ext:Node Text="湛江日报" Icon="Book" Leaf="true" />
                                                </Children>
                                            </ext:Node>
                                            <ext:Node Text="工具类" Expanded="true">
                                                <Children>
                                                    <ext:Node Text="语文工具书" Icon="Book">
                                                        <Children>
                                                            <ext:Node Text="黄冈兵法" Icon="Book" Leaf="true" />
                                                            <ext:Node Text="语文宝典" Icon="Book" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                    <ext:Node Text="数学工具书" Icon="Book" Leaf="true" />
                                                    <ext:Node Text="英语工具书" Icon="Book" Leaf="true" />
                                                </Children>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>

五、CardLayout布局方式

CardLayout布局方式也称为卡片式布局方式
 
<ext:Panel ID="Panel1" runat="server" Height="300" Title="卡片式布局方式" Layout="CardLayout"
                Width="300" X="100" Y="100">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Height="300" Title="卡片1">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text="这是卡片1的内容">
                            </ext:Label>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel3" runat="server" Height="300" Title="卡片2">
                        <Items>
                            <ext:Label ID="Label2" runat="server" Text="这是卡片2的内容">
                            </ext:Label>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel4" runat="server" Height="300" Title="卡片3">
                        <Items>
                            <ext:Label ID="Label3" runat="server" Text="这是卡片3的内容">
                            </ext:Label>
                        </Items>
                    </ext:Panel>
                </Items>
                <Buttons>
                    <ext:Button ID="btnPrev" runat="server" Text="上一页">
                        <DirectEvents>
                            <Click OnEvent="Prev_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="index" Value="#{Panel1}.items.indexOf(#{Panel1}.layout.activeItem)"
                                        Mode="Raw" />
                                </ExtraParams>
                                <EventMask ShowMask="true" Msg="正在处理" />
                                <Confirmation Message="确定要处理吗？" Title="提示" ConfirmRequest="true" />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btnNext" runat="server" Text="下一页">
                        <DirectEvents>
                            <Click OnEvent="Next_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="index" Value="#{Panel1}.items.indexOf(#{Panel1}.layout.activeItem)"
                                        Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
            </ext:Panel>

六、FitLayout布局方式

FitLayout布局方式，以自适应的方式进行布局
 
<ext:Viewport runat="server" ID="viewFit" Layout="FitLayout">
                <Items>
                    <ext:Panel runat="server" BodyPadding="15" Title="FitLayout布局" Html="该Panel将适应整个容器" />
                </Items>
            </ext:Viewport>

七、FormLayout布局模式

<ext:Window runat="server" ID="loginWin" Title="登陆" Icon="Lock" BodyPadding="20" Draggable ="false" Modal="true"
                Width="600" Height="400" Layout="FormLayout" ButtonAlign="Center" DefaultButton="btnSave" Frame="true">
                <Items>
                    <ext:TextField runat="server" ID="txtUserName" FieldLabel="用户名" AllowBlank="false" 
                        LabelStyle="color:red" LabelSeparator="-">
                        <CustomConfig>
                            <ext:ConfigItem Name="toolTip" Value="请输入用户名" />
                        </CustomConfig>
                        <AfterLabelTextTpl runat="server">
                            <Html>
                                <span style="color:red;font-weight:bold" data-qtip="Required">*</span>
                            </Html>
                        </AfterLabelTextTpl>
                    </ext:TextField>

                    <ext:TextField runat="server" ID="txtPassword" FieldLabel="密码" InputType="Password" AllowBlank="false" Text="Demo" 
                        BlankText="请输入密码" />

                    <ext:DateField runat="server" ID="txtDate" FieldLabel="日期" AllowBlank="false" Editable="false">
                        <CustomConfig>
                            <ext:ConfigItem Name="tip" Value="请输入日期" />
                        </CustomConfig>
                    </ext:DateField>

                    <ext:NumberField runat="server" FieldLabel="年龄" MinValue="0" MaxValue="100" AllowBlank="false">

                    </ext:NumberField>

                    <ext:TimeField runat="server" FieldLabel="时间" MinTime="08:00" MaxTime="20:00" AllowBlank="false">
                        <CustomConfig>
                            <ext:ConfigItem Name="tips" Value="请输入时间" />
                        </CustomConfig>
                    </ext:TimeField>

                    <ext:FieldSet runat="server" Title="用户信息" CheckboxToggle="true" Layout="FormLayout" Collapsed="true">
                        <Defaults>
                            <ext:Parameter Name="LabelWidth" Value="90" />
                        </Defaults>
                        <Items>
                            <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" AllowBlank="false" />
                            <ext:TextField ID="TextField2" runat="server" FieldLabel="Last Name" />
                            <ext:TextField ID="TextField3" runat="server" FieldLabel="Company" />
                            <ext:TextField ID="TextField4" runat="server" FieldLabel="Email" />
                        </Items>
                    </ext:FieldSet>
                </Items>
                <Buttons>
                    <ext:Button runat="server" ID="btnSave" Text="登陆" Icon="Accept" />
                    <ext:Button runat="server" ID="btnCancel" Text="取消" Icon="Cancel" />
                </Buttons>
            </ext:Window>

八、TableLayout布局方式

<ext:Viewport ID="ViewPort2" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel
                        ID="pnlTableLayout"
                        runat="server"
                        Region="Center"
                        Title="Table Layout"
                        Border="false"
                        BodyPadding="15"
                        Layout="TableLayout">
                        <LayoutConfig>
                            <ext:TableLayoutConfig Columns="4" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel
                                ID="Panel3"
                                runat="server"
                                Title="Lots of Spanning"
                                BodyPadding="15"
                                Height="320"
                                Html="<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>"
                                RowSpan="3" />
                            <ext:Panel
                                ID="Panel7"
                                runat="server"
                                Title="Basic Table Cell"
                                BodyPadding="15"
                                Height="105"
                                Html="<p>Basic panel in a table cell.</p>" />
                            <ext:Panel
                                ID="Panel8"
                                runat="server"
                                Header="false"
                                BodyPadding="15"
                                Height="105"
                                Html="<p>Plain panel</p>" />
                            <ext:Panel
                                ID="Panel9"
                                runat="server"
                                RowSpan="2"
                                Title="Another Cell"
                                Width="300"
                                Height="220"
                                BodyPadding="15"
                                Html="<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>" />

                            <ext:Panel
                                ID="Panel10"
                                runat="server"
                                ColSpan="2"
                                Height="100"
                                Header="false"
                                BodyPadding="15"
                                Html="Plain cell spanning two columns" />
                            <ext:Panel
                                ID="Panel11"
                                runat="server"
                                ColSpan="3"
                                Height="85"
                                Title="More Column Spanning"
                                BodyPadding="15"
                                Html="<p>Spanning three columns.</p>" />
                            <ext:Panel
                                ID="Panel12"
                                runat="server"
                                ColSpan="4"
                                Title="Spanning All Columns"
                                BodyPadding="15"
                                Html="<p>Spanning all columns.</p>" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>

九、ColumnLayout布局方式

<ext:Viewport ID="Viewport2" runat="server" Layout="ColumnLayout">
                <Items>
                    <ext:Panel ID="Panel3"
                        runat="server"
                        ColumnWidth="0.25"
                        Height="100"
                        Title="Width=0.25"
                        Html="This is some content." />
                    <ext:Panel ID="Panel7"
                        runat="server"
                        ColumnWidth="0.75"
                        Height="100"
                        Title="Width=0.75"
                        Html="This is some content." />
                    <ext:Panel ID="Panel8"
                        runat="server"
                        Title="Width=250px"
                        Height="100"
                        Width="250"
                        Html="This is some content." />
                </Items>
            </ext:Viewport>

小K的大师兄
关注
专栏目录
ext.net 1.x DEMO
07-18
EXT.NET 1.x 版本是早期的一个稳定版本，包含了多种基础和高级的组件，支持多种功能，例如数据绑定、表格、图表、表单、布局管理等。这个版本特别适合用于构建企业级应用，因为它提供了完善的API和强大的服务器端...
EXT.NET网站应用程序开发教程英文版
03-30
6. **布局与样式**：EXT.NET提供了灵活的布局系统，允许开发者创建复杂的页面结构。这部分会讲解各种布局类型，以及如何自定义样式和皮肤。 7. **表单处理**：表单是网页应用中常见的元素，EXT.NET提供了丰富的表单...
Ext.NET-布局
Guog
05-12 1080
前一篇介绍了Ext.NET基础知识，并对Ext.NET的布局进行了简要的说明，本文中我们用一个完整的示例代码来看看Ext.NET的布局。
EXT.NET复杂布局（四）——系统首页设计（上）
weixin_33755847的博客
12-30 160
很久没有发帖了，很是惭愧，因此给各位使用EXT.NET的朋友献上一份礼物。 本篇主要讲述页面设计与效果，下篇将讲述编码并提供源码下载。 系统首页设计往往是个难点，因为往往要考虑以下因素： 重要通知 系统功能菜单 快捷操作 日常维护工作（比如待办事项、已办事项等等） 用户信息（比如公司、部门、组织机构） 系统信息（意见反馈、帮助等） 联系沟通 等等 又要兼顾美观得体（丑...
EXT.NET复杂布局（四）——系统首页设计（下）
weixin_33827965的博客
01-05 124
此篇为EXT.NET系列终结篇。希望此系列能够对大家有所帮助。 首页JS函数介绍 使然使用了Ext.NET，但是JavaScript的地位还是举足轻重的。 1.添加选项卡   1: var addTab = function (id, url, title) { 2: var tab = tplCenter.getCompon...
Ext.Net 布局
HelloLWei的专栏
03-01 1665
Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局       1，Ext.layout.ContainerLayout 容器布局       提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在           2，Ext.layout.FitLayout 自适应布局
Ext.Net 控件Anchor布局-锚点布局
快乐人生
09-12 4211
1、锚点布局       有两个关键点：         为父容器控件设置Layout属性为Anchor；         为每个子容器控件设置AnchorValue属性，用来指定子容器控件的锚点布局参数。 2、Anchor的取值 Anchor可以由两个值组成，中间以空格分隔；也可以由一个值组成，此时第二个值就是默认值。 这两个值分别表示水平的锚点值和垂直的锚点值。Anchor可以
EXTnet.zip_ext.net
09-24
4. **服务器通信**：EXT.NET提供了多种方式与服务器进行通信，如DirectMethods、Ajax请求等，可以实现异步更新和实时交互。 5. **响应式设计**：EXT.NET支持移动设备和平板电脑，可以创建自适应的布局，适应不同...
ext.net 中树加载及实现方式，初学者可以参考
12-04
本文将详细介绍EXT.NET中的树加载及其实现方式，这对于初学者来说是一份很好的参考资料。 首先，EXT.NET中的树形控件基于Ext JS库，提供丰富的功能，如拖放操作、节点编辑、异步加载等。在实际应用中，我们通常使用...
Ext.NET官方案例
02-14
2. **布局管理**：包括流式布局、网格布局、绝对布局、卡片布局等多种布局方式，这些布局使得页面元素可以灵活地排列和适应不同屏幕尺寸。 3. **数据绑定**：Ext.NET支持数据源绑定，如XML、JSON、Web服务等，可以...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦！
ext.net 开发学习之复杂面板_TableLayout、RowLayout（五）
weixin_34008805的博客
01-11 185
      B2C Business-to-Consumer  现在流行念“B二C”……大胆创举！值得赞扬对开发人员来说：浏览器兼容性 是一大头疼之事。因部门分工明确，所以我们很少碰html代码，但没有UED时，只有硬着头皮去摸索。昨天就还在这摔了一跤！现在才搞定！火狐，Chrome，Safari，IE8，Opera……都测试ok。问题就出在IE6，7  。没办法  IE6，7占领国内用户浏览器半...
EXT.NET(六)Panel 布局
数据库天地
11-09 209
我经常用到HTML中的表格，如果在EXT.NET 刚开始还真不知道怎么搞？ 群里的APP CAI教我用PANEL 表示感谢！ &lt;ext:Window ID="Window1" runat="server" Collapsible="true" Height="300" Icon="ApplicationEdit" Title="录入报价单基本信息"
ext.net 中的 Layout
dyx2010的专栏
06-17 388
============================================================================ Layout: #Layout中的布局的格式子的格式会覆盖父类的布局的格式 -Absolute Layout Form: 通过X 和 Y 坐标来绝确定位置:Panel 中X 和 Y 来设定的位置: -AccordiionLayout 可
Ext.net 控件纠结的布局（一）
dianrem321833的博客
08-16 125
公司需要用Ext.net控件做个bs项目。 于是马上动手研究，刚刚上手打算做个登录页，就遇到问题。 看来效果很牛的控件，用法也需要很独特才是。像我用惯了vs2005自带控件的人，可能需要好好转变下思维才行。 作为第二篇博客，打算就这个项目分享学习一下Ext.net这套控件的使用，和设计经验。 首先从简单的登录开始。 加载类库后发现不少新控件，layout系列，一看就是布局相关的...
Ext3.2 布局——table layout
专注于应用与管理！
02-11 836
tablelayout 并不是很常用，不过也需要知道怎么回事。API上是如此的描述： 此布局允许你方便地向一个HTML表格中渲染内容。 可以指定列总数，并且可以用rowspan和colspan来在表格内部创建 复杂的布局。  在TableLayout的情况下，唯一合法的配置参数是 columns。 但是，添加到TableLayout中的项目可以提供如下表格-特定的配置参数:
Ext.Net中，第二种：AccordionLayout布局方式。
weixin_30924239的博客
05-10 112
（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！） 在Ext.Net中一共有14种布局方式，下面我会一一介绍。 第二种：AccordionLayout布局方式。 AccordionLayout布局方式也称为：手风琴布局方式。 这种布局方式比较简单！ 下面我们看一下代码： 页面源码： <ext:...
ext.net 开发学习——常用布局（八）
weixin_30814329的博客
07-11 139
Ext.Net 官网Demo 有几种布局http://examples.ext.net/ 因需求不同，布局也同样多种多样，现整理部分常用的布局+源码 源码： <form id="form1" runat="server"> <ext:ResourceManager ID="RMEmployeeInfos" runat="server" /> ...
Ext常用6大布局方式
zhangxiaoben16的博客
02-22 345
只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局     简单说明最常用到的6种布局方式： 一.最简单的布局：FitLayout new Ext.Viewport({ layout:'fit', items:[oGrid] //oGrid是一个表格 });           注意： 1.使用Fit布局 items中只能有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值