EXT.NET的布局方式

一、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>

发布了51 篇原创文章 · 获赞 4 · 访问量 6万+
展开阅读全文

Ext.Net1.7 后台操作页面超时 并 实现进度条的问题

10-01

![](https://img-ask.csdn.net/upload/201510/01/1443698718_356785.png) 需要达到如图样式 protected void Page_Load(object sender, EventArgs e) { } private static string TableName; //要修改的表名 [DirectMethod(Timeout = 900000)] protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e) { UpHouse(); } [DirectMethod(Timeout=900000)] public void UpHouse() { try { TableName = this.txtTable.Text.Trim(); DataTable dt = GetDataReader("select distinct HouseCode from " + TableName + " order by HouseCode"); //获取非重复的数据 foreach (DataRow dr in dt.Rows) { string HouseCode = dr["HouseCode"].ToString(); string strSql = "select Id,HouseCode,HouseNo from " + TableName + " where HouseCode = '" + HouseCode + "' order by HouseCode"; DataTable dtr = GetDataReader(strSql); for (int i = 0; i < dtr.Rows.Count; i++) { string HouseCode_new = dtr.Rows[i]["HouseCode"].ToString().Trim(); string HouseNo = dtr.Rows[i]["HouseNo"].ToString().Trim(); string HouseId = dtr.Rows[i]["Id"].ToString().Trim(); if (HouseCode_new != HouseNo) { string UdSql = "Update " + TableName + " set HouseNo = '" + HouseCode_new + "' where Id = " + HouseId; UpdateDataReader(UdSql); break; } } } X.Msg.Alert("提示", "修改成功!").Show(); } catch (Exception e) { X.Msg.Alert("提示", "修改失败!" + e.Message).Show(); } } #region 数据处理 public static string strConn = "Data source=localhost;database=HH;user id=sa;pwd=sa;"; public static DataTable GetDataReader(string strSql) { using (SqlConnection connection = new SqlConnection(strConn)) { DataTable dt = new DataTable(); try { SqlDataAdapter command = new SqlDataAdapter(strSql, strConn); connection.Open(); command.Fill(dt); } catch (Exception ex) { connection.Close(); throw new Exception(ex.Message); } finally { connection.Close(); } return dt; } } public static int UpdateDataReader(string strSql) { using (SqlConnection connection = new SqlConnection(strConn)) { DataSet ds = new DataSet(); try { SqlCommand command = new SqlCommand(strSql, connection); connection.Open(); if (command.ExecuteNonQuery() > 0) { return 1; } else { return 0; } } catch (Exception ex) { connection.Close(); throw new Exception(ex.Message); } finally { connection.Close(); } } } #endregion } } 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览