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 ),这样就可以了。

posted @ 2013-05-10 17:22  陈海波  阅读(441)  评论(0编辑  收藏  举报