Ext.NET-布局篇

概述

前一篇介绍了Ext.NET基础知识，并对Ext.NET布局进行了简要的说明，本文中我们用一个完整的示例代码来看看Ext.NET的布局。

示例代码下载地址>>>>>

本文目的

本文使用Tree、Grid应该是我们最为常用的控件，实现自适应的页面布局，

顶端：使用Panel，可折叠；

左侧：使用TreePanel，可折叠;

中间：使用GridPanel，主要区域，不可折叠；

底部：使用GridPanel，可折叠；

先看看我们最终实现的效果

整体布局

全部折叠后的效果

当点击gridMain下的新增按钮弹出Window

开始之前

新建WebFrom窗体

新建WebFrom窗体，并在ASPX文件中添加入下代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Ext.Net布局示例</title>

</head>

<body>

    <ext:ResourceManager runat="server" />

</body>

</html>

关于<ext:ResourceManager runat="server" />上一篇中已经讲过，它必须在<body></body>中第一行，因为它负责为Web页面添加所需的js和css文件的引用。

一个最简单的页面布局示例

在开始之前，我们先来看看一个最为简单的Viewport页面布局示例

添加CSS样式

为了演示需要我们为每个区域指定不同的背景颜色，在<head></head>添加如下CSS样式

<style type="text/css">

    .north {

        background-color: #FFFFFF;

    }

    .west {

        background-color: #00FFFF;

    }

    .center {

        background-color: #FF00FF;

    }

    .sourth {

        background-color: #FFFF00;

    }

</style>

添加Viewport

我们需要实现的是自适应浏览器窗口大小(占满整个<body></body>)，所以使用Viewport，首先在<ext:ResourceManager runat="server" />下面添加如下代码

<ext:Viewport runat="server" Layout="BorderLayout">

</ext:Viewport>

Viewport将自己呈现在<body></body>中，并自动调整自身大小以适应整个浏览器窗口，一个Web页面只允许出现一个Viewport。

关于Viewport的详细说明参见此处。

我们将页面分为多个区域，并可以手动调整没个区域的大小，所以，Viewport的属性Layout="BorderLayout";

添加子控件

接着我们为Viewport添加子容器，每个子容器代表一个区域；

<ext:Viewport runat="server" Layout="BorderLayout">

    <Items>

        <ext:Container runat="server" Region="North" Html="<h2>North</h2>"  Cls="north">

        </ext:Container>

        <ext:Container runat="server" Region="West" Html="<h2>West</h2>" Cls="west">

        </ext:Container>

        <ext:Container runat="server" Region="Center" Html="<h2>Center</h2>" Cls="center">

        </ext:Container>

        <ext:Container runat="server" Region="South" Html="<h2>Sourth</h2>" Cls="sourth">

        </ext:Container>

    </Items>

</ext:Viewport>

运行效果如下

说明

Viewport中的<Items>...</Items>,Items中只能定义Ext.NET提供的控件，而有时候我们需要写一些HTML或ASP.NET自带的控件，请使用'',如<Content><div>...</div></Content>

Container的Region属性指定了自身在Viewport中的位置，Region的值可以为

North：顶部；
South：底部；
East：右边；
West：左边；
Center：占满剩余的空间，在BorderLayout式布局中，必须有一个控件的Region为Center。

最终的ASPX代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Ext.Net布局示例</title>

    <style type="text/css">

        .north {

            background-color: #FFFFFF;

        }

        .west {

            background-color: #00FFFF;

        }

        .center {

            background-color: #FF00FF;

        }

        .sourth {

            background-color: #FFFF00;

        }

    </style>

</head>

<body>

    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">

        <Items>

            <ext:Container runat="server" Region="North" Html="<h2>North</h2>" Cls="north">

            </ext:Container>

            <ext:Container runat="server" Region="West" Html="<h2>West</h2>" Cls="west">

            </ext:Container>

            <ext:Container runat="server" Region="Center" Html="<h2>Center</h2>" Cls="center">

            </ext:Container>

            <ext:Container runat="server" Region="South" Html="<h2>Sourth</h2>" Cls="sourth">

            </ext:Container>

        </Items>

    </ext:Viewport>

</body>

</html>

前面说过，Ext.NET是对ExtJs的封装，它将ASPX页面中的EXT.NET标记代码翻译成ExtJS，我们可以看看它为我们生成的ExtJs(javascript)代码

Ext.net.ResourceMgr.init({

    id: "ctl01",

    theme: "neptune"

});

Ext.onReady(function () {

    Ext.create("Ext.container.Viewport", {

        renderTo: Ext.getBody(),

        items: [

            {

                cls: "north",

                html: "<h2>North</h2>",

                xtype: "container",

                region: "north"

            },

            {

                cls: "west",

                html: "<h2>West</h2>",

                xtype: "container",

                region: "west"

            },

            {

                cls: "center",

                html: "<h2>Center</h2>",

                xtype: "container",

                region: "center"

            },

            {

                cls: "sourth",

                html: "<h2>Sourth</h2>",

                xtype: "container",

                region: "south"

            }

        ],

        layout: "border"

    });

});

使用浏览器的查看源码功能，若是javascript代码没有格式化，请在Web.config文件中进行如下设置

<extnet theme="Crisp"

        scriptMode="Debug"

        sourceFormatting="true"

        licenseKey="** Ext.NET LICENSE KEY HERE **"

        initScriptMode="Linked"/>

详细的设置请参见上一篇中 WEBCONFIG中extnet 配置说明。

实现页面布局

代码

上面的简单示例演示了BorderLayout最基本的布局，接着我们来看看一个实例代码。

删除上面为了演示添加的代码，我们最初的页面ASPX代码是这样的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Ext.Net布局示例</title>

</head>

<body>

    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">

        <Items>

        </Items>

    </ext:Viewport>

</body>

</html>

我们在<ext:Viewport><Items>...代码...</Items></ext:Viewport>中分别添加Panel(pnlTop)、TreePanel(pnlLeft)、和两个GridPanel(gridMain和gridChild)，代码如下

<ext:Viewport runat="server" Layout="BorderLayout">

    <Items>

        <ext:Panel runat="server" Header="false" ID="pnlTop" Region="North" Html="The North"

            BodyPadding="10" CollapseMode="Mini" Collapsible="true" Split="true">

        </ext:Panel>

        <ext:TreePanel runat="server" Region="West" Flex="1"

            Title="LeftTree" HideCollapseTool="true" Collapsible="true"

            Split="true" ID="pnlLeft">

            <Tools>

                <ext:Tool Type="Expand" ToolTip="全部展开">

                </ext:Tool>

                <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">

                </ext:Tool>

            </Tools>

        </ext:TreePanel>

        <ext:Container runat="server" Region="Center" Flex="4"

            Layout="BorderLayout">

            <Items>

                <ext:GridPanel runat="server" Title="gridMain" Region="Center" Flex="2">

                    <DockedItems>

                        <ext:Toolbar runat="server" Dock="Top">

                            <Items>

                                <ext:Button runat="server" ID="btnMainAdd"

                                    Icon="Add" ToolTip="新建">

                                </ext:Button>

                                <ext:Button runat="server" ID="btnMainDelete"

                                    Icon="Delete" ToolTip="删除">

                                </ext:Button>

                            </Items>

                        </ext:Toolbar>

                         <ext:PagingToolbar runat="server" ID="pagMain" Dock="Bottom">

                        </ext:PagingToolbar>

                    </DockedItems>

                </ext:GridPanel>

                <ext:GridPanel runat="server" Title="gridChild" Region="South" Flex="1"

                    Collapsible="true" CollapseDirection="Bottom" Split="true">

                    <DockedItems>

                        <ext:Toolbar runat="server" Dock="Top">

                            <Items>

                                <ext:Button runat="server" ID="btnChildAdd" Icon="Add"

                                    ToolTip="新建">

                                </ext:Button>

                                <ext:Button runat="server" ID="btnChildDelete" Icon="Delete"

                                    ToolTip="删除">

                                </ext:Button>

                            </Items>

                        </ext:Toolbar>

                        <ext:PagingToolbar runat="server" ID="pagChild" Dock="Bottom">

                        </ext:PagingToolbar>

                    </DockedItems>

                </ext:GridPanel>

            </Items>

        </ext:Container>

    </Items>

</ext:Viewport>

实际运行效果如下

我们对每个Panel分别说明

顶部Panel说明(`ID="pnlTop"`)

Header="false":隐藏标题栏；

Region="North":在父容器的顶端显示；

Html="The North":其中要显示的HTML内容，不能和内部的<items></items>同时出现；

BodyPadding="10":同CSS的padding，只能为整数；

CollapseMode="Mini":折叠方式为Mini，可选项有Default、Header、Mini,详细说明见此处；

Collapsible="true":可折叠；

Split="true":可改变尺寸，详细说明见此处。

由于我们没有对此Panel的高度做任何定义，所以它会根据其内容自动调整默认高度。

关于更多的Panel说明见此处。

左侧TreePanel说明(`ID="pnlLeft"`)

本文只是为了说明布局，所以此处的TreePanel中没有任何内容。

属性说明

Region="West":在父容器的左侧显示；

Flex="1":一个单位宽度,详细说明见此处；

Title="LeftTree":标题栏文字；

HideCollapseTool="true":隐藏收缩工具按钮；

Collapsible="true":可折叠；

Split="true":可改变尺寸，详细说明见此处。

Tools说明

<Tools>

    <ext:Tool Type="Expand" ToolTip="全部展开">

    </ext:Tool>

    <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">

    </ext:Tool>

</Tools>

如上代码表示了TreePanel标题栏右侧的两个按钮，其中ToolTip属性为鼠标悬停时的提示文字。

Center区域说明

如下代码定义了一个Viewport中4个单位宽(Flex="4")的Center区域(Region="Center")，并指明了其子控件也使用Border布局(Layout="BorderLayout")；

<ext:Container runat="server" Region="Center" Flex="4"

    Layout="BorderLayout">

    省略代码......

</ext:Container>

GridPanel说明

本文只是为了说明布局，所以此处的GridPanel中没有任何内容。

两个GridPanel除了ID和Flex属性不同外，其余属性基本相同。

<DockedItems>...</DockedItems>中定义了两个Dock属性的控件，一个Dock="Top"的Toolbar和Dock="Bottom"的PagingToolbar，从字面意思可以看出一个是工具栏，而另一个是分页工具栏；

添加Window

为了实现弹出编辑，我们需要使用Window控件，在</ext:Viewport>和</body>之间加入如下代码

<ext:Window runat="server" ID="winMain" Icon="ApplicationEdit" Hidden="true" Collapsible="true"

    Constrain="true" MinHeight="400" MinWidth="500" Modal="true" CloseAction="Destroy" Layout="FitLayout">

    <Buttons>

        <ext:Button runat="server" ID="btnMainSave" Text="保存">

        </ext:Button>

        <ext:Button runat="server" ID="btnMainCancel" Text="取消">

            <Listeners>

                <Click Handler="#{winMain}.close();" />

            </Listeners>

        </ext:Button>

    </Buttons>

    <Items></Items>

</ext:Window>

Window属性说明

Icon="ApplicationEdit":定义Windows的图标，Ext.NET内置了上百个图标；

Hidden="true":此Window是隐藏的，因为我们初次打开页面时不需要显示此Window，当编辑或新增时才显示；

Collapsible="true":可折叠；

Constrain="true":不允许超出父容器的区域，此时其父容器为body，也就意味着此Window不能超出整个Web页面；

MinHeight="400" MinWidth="500":最小高度和最小高度；

Modal="true":模式窗体方式显示，类似MicroSoft Windows提供的模式窗体方式，这个已经很常见了；

CloseAction="Hide":关闭方式为隐藏，可选项有'Destroy'和'Hide'，因为我们需要重复利用此Window，而不用每次new一个新的Window，达到重用效果；

Layout="FitLayout":其内部采用铺满方式的布局。

Window>Buttons说明

<Buttons>...</Buttons>中定义了两个按钮，一个用来保存，一个用来取消，点取消按钮时关闭此Window；

<Click Handler="#{winMain}.close();" />中的#{winMain}相当于javascript中的App.winMain,表示winMain的实例对象，Window提供了close方法；一般用 Fn指示javascript中的事件方法名称，而Handler一般用来写一些相对简单的实现代码。

弹出显示Window

我们可以通过服务器端事件(Directevents)来弹出显示Window，也可以使用客户端javascript。

服务器端显示Window示例代码

protected void btnMainAdd_Click(object sender,Ext.Net.DirectEventArgs e)

{

    winMain.Show();

}

客户端javascript显示Window示例代码

var btnMainAdd_Click = function(sender,e) {

    App.winMain.show();

};

这里我们采用后者，这样减少了一次与服务器端的交互，由于此处的代码很简单(只有一行实际代码)，所以我们可以使用Handler方式来写。修改btnMainAdd的代码如下：

<ext:Button runat="server" ID="btnMainAdd"

    Icon="Add" ToolTip="新建">

    <Listeners>

        <Click Handler="#{winMain}.show()" />

    </Listeners>

</ext:Button>

这样，当单击gridMain工具栏中的新建按钮时，将弹出winMain，运行效果如下：

接着我们可以在此Window中添加各种文本、数字、日期等控件，编辑/新建实际的数据以存储到实际的数据库中，这个我们放在后面再来细说。

最终代码

最终的ASPX代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Ext.Net布局示例</title>

</head>

<body>

    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">

        <Items>

            <ext:Panel runat="server" Header="false" ID="pnlTop" Region="North" Html="The North"

                BodyPadding="10" CollapseMode="Mini" Collapsible="true" Split="true">

            </ext:Panel>

            <ext:TreePanel runat="server" Region="West" Flex="1"

                Title="LeftTree" HideCollapseTool="true" Collapsible="true"

                Split="true" ID="pnlLeft">

                <Tools>

                    <ext:Tool Type="Expand" ToolTip="全部展开">

                    </ext:Tool>

                    <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">

                    </ext:Tool>

                </Tools>

            </ext:TreePanel>

            <ext:Container runat="server" Region="Center" Flex="4"

                Layout="BorderLayout">

                <Items>

                    <ext:GridPanel runat="server" Title="gridMain" Region="Center" Flex="2">

                        <DockedItems>

                            <ext:Toolbar runat="server" Dock="Top">

                                <Items>

                                    <ext:Button runat="server" ID="btnMainAdd"

                                        Icon="Add" ToolTip="新建">

                                        <Listeners>

                                            <Click Handler="#{winMain}.show()" />

                                        </Listeners>

                                    </ext:Button>

                                    <ext:Button runat="server" ID="btnMainDelete"

                                        Icon="Delete" ToolTip="删除">

                                    </ext:Button>

                                </Items>

                            </ext:Toolbar>

                            <ext:PagingToolbar runat="server" ID="pagMain" Dock="Bottom">

                            </ext:PagingToolbar>

                        </DockedItems>

                    </ext:GridPanel>

                    <ext:GridPanel runat="server" Title="gridChild" Region="South" Flex="1"

                        Collapsible="true" CollapseDirection="Bottom" Split="true">

                        <DockedItems>

                            <ext:Toolbar runat="server" Dock="Top">

                                <Items>

                                    <ext:Button runat="server" ID="btnChildAdd" Icon="Add"

                                        ToolTip="新建">

                                    </ext:Button>

                                    <ext:Button runat="server" ID="btnChildDelete" Icon="Delete"

                                        ToolTip="删除">

                                    </ext:Button>

                                </Items>

                            </ext:Toolbar>

                            <ext:PagingToolbar runat="server" ID="pagChild" Dock="Bottom">

                            </ext:PagingToolbar>

                        </DockedItems>

                    </ext:GridPanel>

                </Items>

            </ext:Container>

        </Items>

    </ext:Viewport>

    <ext:Window runat="server" ID="winMain" Icon="ApplicationEdit" Hidden="true" Collapsible="true"

        Constrain="true" MinHeight="400" MinWidth="500" Modal="true" CloseAction="Destroy" Layout="FitLayout">

        <Buttons>

            <ext:Button runat="server" ID="btnMainSave" Text="保存">

            </ext:Button>

            <ext:Button runat="server" ID="btnMainCancel" Text="取消">

                <Listeners>

                    <Click Handler="#{winMain}.close();" />

                </Listeners>

            </ext:Button>

        </Buttons>

        <Items></Items>

    </ext:Window>

</body>

</html>

自2010年的 Coolite 时代开始，几乎所有.NET Web项目中使用 Ext.NET ，这篇文章算是表达对他们的敬意。

转载请注明出处 © guog 2015