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" %>
<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>关于中第一行，因为它负责为Web页面添加所需的js和css文件的引用。
一个最简单的页面布局示例
在开始之前，我们先来看看一个最为简单的Viewport页面布局示例
添加CSS样式
为了演示需要我们为每个区域指定不同的背景颜色，在添加如下CSS样式
<style type="text/css">
.north {
background-color: #FFFFFF;
}
.west {
background-color: #00FFFF;
}
.center {
background-color: #FF00FF;
}
.sourth {
background-color: #FFFF00;
}
style>添加Viewport
我们需要实现的是自适应浏览器窗口大小(占满整个)，所以使用Viewport，首先在
<ext:Viewport runat="server" Layout="BorderLayout">
ext:Viewport>Viewport将自己呈现在中，并自动调整自身大小以适应整个浏览器窗口，一个Web页面只允许出现一个Viewport。
关于Viewport的详细说明参见此处。
我们将页面分为多个区域，并可以手动调整没个区域的大小，所以，Viewport的属性Layout="BorderLayout";
添加子控件
接着我们为Viewport添加子容器，每个子容器代表一个区域；
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Container runat="server" Region="North" Html="North
" Cls="north">
ext:Container>
<ext:Container runat="server" Region="West" Html="West
" Cls="west">
ext:Container>
<ext:Container runat="server" Region="Center" Html="Center
" Cls="center">
ext:Container>
<ext:Container runat="server" Region="South" Html="Sourth
" Cls="sourth">
ext:Container>
Items>
ext:Viewport>运行效果如下
说明
- Viewport中的
,Items中只能定义Ext.NET提供的控件，而有时候我们需要写一些HTML或ASP.NET自带的控件，请使用’‘,如... - 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" %>
<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="North
" Cls="north">
ext:Container>
<ext:Container runat="server" Region="West" Html="West
" Cls="west">
ext:Container>
<ext:Container runat="server" Region="Center" Html="Center
" Cls="center">
ext:Container>
<ext:Container runat="server" Region="South" Html="Sourth
" 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: "North
",
xtype: "container",
region: "north"
},
{
cls: "west",
html: "West
",
xtype: "container",
region: "west"
},
{
cls: "center",
html: "Center
",
xtype: "container",
region: "center"
},
{
cls: "sourth",
html: "Sourth
",
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" %>
<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>我们在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内容，不能和内部的同时出现；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属性不同外，其余属性基本相同。
Dock="Top"的Toolbar和Dock="Bottom"的PagingToolbar，从字面意思可以看出一个是工具栏，而另一个是分页工具栏；
添加Window
为了实现弹出编辑，我们需要使用Window控件，在和