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