Ext.Net中，第二种：AccordionLayout布局方式。

（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！）

在Ext.Net中一共有14种布局方式，下面我会一一介绍。

第二种：AccordionLayout布局方式。

AccordionLayout布局方式也称为：手风琴布局方式。

这种布局方式比较简单！

下面我们看一下代码：

页面源码：

 <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="AbsoluteLayout">
        <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="TreePanel1" runat="server" Height="300" RootVisible="false" Title="列表2">
                        <Root>
                            <ext:Node Text="Root">
                                <Children>
                                    <ext:Node Text="Friends" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Jack" Icon="User" Leaf="True" />
                                            <ext:Node Text="Brian" Icon="User" Leaf="True" />
                                            <ext:Node Text="Jon" Icon="User" Leaf="True" />
                                            <ext:Node Text="Tim" Icon="User" Leaf="True" />
                                            <ext:Node Text="Nige" Icon="User" Leaf="True" />
                                            <ext:Node Text="Fred" Icon="User" Leaf="True" />
                                            <ext:Node Text="Bob" Icon="User" Leaf="True" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Family" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
                                            <ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
                                            <ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
                                            <ext:Node Text="John" Icon="UserGreen" Leaf="True" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Root>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

在这里，我们可以看到Panel1面板采用了AccordionLayout布局方式，因此，它变成了一个类似菜单栏的界面。

在Panel1面板中，我们可以添加任何控件，实现我们想要的效果。

在上面案例中，我在Panel1面板中添加了两个项目，分别是：Panel2和TreePanel1。

又在Panel2面板中，添加了三个TabPanel控件。

而TreePanel是一个简单的树形结构。先建立 根标签（<Root></Root>），再在其中建立节点控件（ext:Node ），这样就可以了。