ext.net 开发学习——常用布局（八）

 Ext.Net 官网Demo 有几种布局http://examples.ext.net/

因需求不同，布局也同样多种多样，现整理部分常用的布局+源码

源码：

<form id="form1" runat="server">
    <ext:ResourceManager ID="RMEmployeeInfos" runat="server" />
    <div>
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:RowLayout ID="RowLayout1" runat="server">
                    <Rows>
                        <ext:LayoutRow RowHeight="0.03">
                            <ext:Toolbar ID="toolBarMenu" runat="server">
                                <Items>
                                    <ext:Button ID="btnCreate" runat="server" Text="新建" Icon="FilmAdd">
                                    </ext:Button>
                                    <ext:Button ID="Button1" runat="server" Text="打开" Icon="FilmGo">
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="编辑">
                                    </ext:Button>
                                    <ext:Button ID="Button3" runat="server" Text="删除">
                                    </ext:Button>
                                    <ext:Button ID="Button4" runat="server" Text="转抄">
                                    </ext:Button>
                                    <ext:Button ID="Button5" runat="server" Text="红字">
                                    </ext:Button>
                                    <ext:Button ID="Button6" runat="server" Text="蓝字">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button7" runat="server" Text="打印">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button8" runat="server" Text="提交">
                                    </ext:Button>
                                    <ext:Button ID="Button9" runat="server" Text="通过">
                                    </ext:Button>
                                    <ext:Button ID="Button10" runat="server" Text="退回">
                                    </ext:Button>
                                    <ext:Button ID="Button11" runat="server" Text="加签">
                                    </ext:Button>
                                    <ext:Button ID="Button12" runat="server" Text="委托">
                                    </ext:Button>
                                    <ext:Button ID="Button13" runat="server" Text="收回">
                                    </ext:Button>
                                    <ext:Button ID="Button14" runat="server" Text="催办">
                                    </ext:Button>
                                    <ext:Button ID="Button15" runat="server" Text="意见">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button16" runat="server" Text="关联">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button17" runat="server" Text="附件">
                                    </ext:Button>
                                    <ext:Button ID="Button18" runat="server" Text="历史">
                                    </ext:Button>
                                    <ext:Button ID="Button19" runat="server" Text="自定义">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button20" runat="server" Text="帮助">
                                    </ext:Button>
                                    <ext:Button ID="Button21" runat="server" Text="关闭">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </ext:LayoutRow>
                        <ext:LayoutRow RowHeight="0.957">
                            <ext:Panel runat="server">
                                <Items>
                                    <ext:BorderLayout runat="server">
                                        <West Collapsible="true" MaxWidth="500" >
                                            <ext:Panel ID="Panel5" runat="server" Title="West" Width="200">
                                                <Items>
                                                </Items>
                                            </ext:Panel>
                                        </West>
                                        <Center>
                                            <ext:Panel runat="server">
                                                <Items>
                                                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                                                        <Center MaxHeight="700" MinHeight="100">
                                                            <ext:Panel ID="Panel3" runat="server" Height="500" Layout="Accordion" Title="North">
                                                            </ext:Panel>
                                                        </Center>
                                                        <South Collapsible="true">
                                                            <ext:Panel ID="Panel4" Height="150" runat="server" Title="South">
                                                            </ext:Panel>
                                                        </South>
                                                    </ext:BorderLayout>
                                                </Items>
                                            </ext:Panel>
                                        </Center>
                                    </ext:BorderLayout>
                                </Items>
                            </ext:Panel>
                        </ext:LayoutRow>
                    </Rows>
                </ext:RowLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>

二

源码：

  <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport ID="vpMainCenter" runat="server" Layout="Fit">
            <Items>
                <ext:RowLayout runat="server">
                    <Rows>
                        <ext:LayoutRow RowHeight="0.033">
                            <ext:Toolbar ID="toolBarMenu" runat="server">
                                <Items>
                                    <ext:Button ID="btnCreate" runat="server" Text="新建" Icon="FilmAdd">
                                    </ext:Button>
                                    <ext:Button ID="Button1" runat="server" Text="打开" Icon="FilmGo">
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="编辑">
                                    </ext:Button>
                                    <ext:Button ID="Button3" runat="server" Text="删除">
                                    </ext:Button>
                                    <ext:Button ID="Button4" runat="server" Text="转抄">
                                    </ext:Button>
                                    <ext:Button ID="Button5" runat="server" Text="红字">
                                    </ext:Button>
                                    <ext:Button ID="Button6" runat="server" Text="蓝字">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button7" runat="server" Text="打印">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button8" runat="server" Text="提交">
                                    </ext:Button>
                                    <ext:Button ID="Button9" runat="server" Text="通过">
                                    </ext:Button>
                                    <ext:Button ID="Button10" runat="server" Text="退回">
                                    </ext:Button>
                                    <ext:Button ID="Button11" runat="server" Text="加签">
                                    </ext:Button>
                                    <ext:Button ID="Button12" runat="server" Text="委托">
                                    </ext:Button>
                                    <ext:Button ID="Button13" runat="server" Text="收回">
                                    </ext:Button>
                                    <ext:Button ID="Button14" runat="server" Text="催办">
                                    </ext:Button>
                                    <ext:Button ID="Button15" runat="server" Text="意见">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button16" runat="server" Text="关联">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button17" runat="server" Text="附件">
                                    </ext:Button>
                                    <ext:Button ID="Button18" runat="server" Text="历史">
                                    </ext:Button>
                                    <ext:Button ID="Button19" runat="server" Text="自定义">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button20" runat="server" Text="帮助">
                                    </ext:Button>
                                    <ext:Button ID="Button21" runat="server" Text="关闭">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </ext:LayoutRow>
                        <ext:LayoutRow RowHeight="0.957">
                            <ext:TabPanel runat="server" Region="Center" ID="tblMain" Border="false">
                                <Items>
                                    <ext:Panel runat="server" ID="panel1" Title="Right" Border="false" AutoScroll="true">
                                        <Items>
                                            <ext:RowLayout runat="server" ID="layout1">
                                                <Rows>
                                                    <ext:LayoutRow RowHeight="0.8">
                                                        <ext:Panel ID="layout1Panel" runat="server" Title="North" Collapsible="true">
                                                            <Items>
                                                                <ext:TableLayout runat="server" ID="tblPanel1" Columns="2">
                                                                    <Cells>
                                                                        <ext:Cell CellId="tblPanel1Left">
                                                                            <ext:Panel runat="server" Border="false" Width="800">
                                                                                <Items>
                                                                                    <ext:FieldSet ID="FieldSet2" runat="server" Title="Details" Collapsible="true" Layout="form">
                                                                                        <Items>
                                                                                            <ext:TableLayout ID="TableLayout1" runat="server" Columns="3">
                                                                                                <Cells>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField1" Text="1111" runat="server" FieldLabel="1" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField2" Text="2222" runat="server" FieldLabel="2" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField3" Text="3333" runat="server" FieldLabel="3" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField4" Text="4444" runat="server" FieldLabel="4" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField5" runat="server" FieldLabel="5" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField6" runat="server" FieldLabel="6" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField7" runat="server" FieldLabel="7" />
                                                                                                    </ext:Cell>
                                                                                                </Cells>
                                                                                            </ext:TableLayout>
                                                                                        </Items>
                                                                                    </ext:FieldSet>
                                                                                    <ext:FieldSet ID="FieldSet1" runat="server" Title="Details" Collapsible="true" Layout="form">
                                                                                        <Items>
                                                                                            <ext:TableLayout ID="TableLayout2" runat="server" Columns="3">
                                                                                                <Cells>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField8" Text="1111" runat="server" FieldLabel="1" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField9" Text="2222" runat="server" FieldLabel="2" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField10" Text="3333" runat="server" FieldLabel="3" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField11" Text="4444" runat="server" FieldLabel="4" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField12" runat="server" FieldLabel="5" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField13" runat="server" FieldLabel="6" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField14" runat="server" FieldLabel="7" />
                                                                                                    </ext:Cell>
                                                                                                </Cells>
                                                                                            </ext:TableLayout>
                                                                                        </Items>
                                                                                    </ext:FieldSet>
                                                                                </Items>
                                                                            </ext:Panel>
                                                                        </ext:Cell>
                                                                        <ext:Cell CellId="tblPanel1Right">
                                                                            <ext:Panel ID="Panel3" runat="server" AutoHeight="true" AutoWidth="true">
                                                                                <Items>
                                                                                    <ext:Image ID="Image1" runat="server" Height="300" Width="400" FieldLabel="照片" ImageUrl="\Resource\Images\ss.jpg">
                                                                                    </ext:Image>
                                                                                    <ext:Image ID="Image2" runat="server" Height="200" FieldLabel="照片" ImageUrl="\Resource\Images\ss.jpg" />
                                                                                </Items>
                                                                            </ext:Panel>
                                                                        </ext:Cell>
                                                                    </Cells>
                                                                </ext:TableLayout>
                                                            </Items>
                                                        </ext:Panel>
                                                    </ext:LayoutRow>
                                                    <ext:LayoutRow RowHeight="0.2">
                                                        <ext:TabPanel runat="server" ID="panel2TabPanel" Border="false">
                                                            <Items>
                                                                <ext:Panel ID="Panel4" Border="false" runat="server" Title="高级" Layout="FitLayout">
                                                                </ext:Panel>
                                                            </Items>
                                                        </ext:TabPanel>
                                                    </ext:LayoutRow>
                                                </Rows>
                                            </ext:RowLayout>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel runat="server" Title="right">
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </ext:LayoutRow>
                    </Rows>
                </ext:RowLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>

作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。