Ext.Net中，第六种CardLayout布局方式。

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

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

第六种：CardLayout布局方式。

CardLayout布局方式也称为：卡片式布局方式。

下面我们看一下代码：

页面源码：

<ext:ResourceManager ID="ResourceManager1" runat="server">

    </ext:ResourceManager>

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

                    </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>

后台代码：

 protected void Prev_Click(object sender, DirectEventArgs e)

        {

            int index = int.Parse(e.ExtraParams["index"]);



            if ((index - 1) >= 0)

            {

                this.Panel1.ActiveIndex = index - 1;

            }



            this.CheckButtons();

        }



        protected void Next_Click(object sender, DirectEventArgs e)

        {

            int index = int.Parse(e.ExtraParams["index"]);



            if ((index + 1) < this.Panel1.Items.Count)

            {

                this.Panel1.ActiveIndex = index + 1;

            }



            this.CheckButtons();

        }





        private void CheckButtons()

        {

            int index = this.Panel1.ActiveIndex;



            this.btnNext.Disabled = index == (this.Panel1.Items.Count - 1);

            this.btnPrev.Disabled = index == 0;

        }