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")
由于我们没有对此Panel的高度做任何定义,所以它会根据其内容自动调整默认高度。
关于更多的Panel说明见 此处。
左侧TreePanel说明(ID="pnlLeft")
本文只是为了说明布局,所以此处的TreePanel中没有任何内容。
属性说明
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
Ext.NET-布局篇的更多相关文章
- Ext布局篇
EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- react-native 之布局篇
一.宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位,那么默认的单位是什么呢? /** * Sample React Native App * https://github.c ...
- Ext.Net 布局
Ext.Net 布局 Panel布局类有10种:容器布局,自适应布局,折叠布局,卡片式布局,锚点布局,绝对位置布局,表单布局,列布局,表格布局,边框布局 1,Ext.layout.Cont ...
- Ext.Net学习笔记04:Ext.Net布局
ExtJS中的布局功能很强大,常用的布局有border.accordion.fit.hbox.vbox等,Ext.Net除了将这些布局进行封装以外,更是对border进行了一些非常实用的改进,让我们来 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- Angular Material 教程之布局篇
Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...
- 【WPF】 布局篇
[WPF] 布局篇 一. 几个常用且至关重要的属性 1. Width,Height : 设置窗体,控件宽高. 这里注意,WPF是自适应的, 所以把这2个属性设置 Auto, 则控件宽高会自动改变. 2 ...
随机推荐
- c# 设置winform程序为默认打开软件 在运行中获取参数
1.右键→打开方式→选择默认程序→选择winform程序 2.修改Program.cs 判断注册的事件是否存在,如果不存在则运行实例,并把参数传入MainForm里,如果存在则把参数写到txt文件中, ...
- C#调用自定义表类型参数
-SQL SERVER生成测试环境: --创建测试DB CREATE database Sales; go USE Sales GO --创建表类型 IF TYPE_ID('LocalDT') IS ...
- iOS 获取版本号(Swift和OC两种)
iOS获取应用版本号:version OC: [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVers ...
- C++杂谈(二)初识vector容器与迭代器
教科书中失踪的vector 很奇怪的一件事情,在当时学习C++的时候,老师并没有讲授容器的内容,当时参考的谭浩强老师的红皮C++也没有这个内容,不知为何.后来再学C++,发现容器是一个很重要的概念,在 ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- linux下创建用户
linux下创建用户(一) Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系 ...
- 描述Linux shell中单引号,双引号及不加引号的简单区别(计时2分钟)
简要总结: 单引号: 可以说是所见即所得:即将单引号内的内容原样输出,或者描述为单引号里面看到的是什么就会输出什么. 双引号: 把双引号内的内容输出出来:如果内容中有命令.变量等,会先把变量.命令解析 ...
- 移动Windows用户文件夹的方法研究
这种方法可能导致升级Windows失败.请谨慎使用. Windows 8.1 使用有效.其他系统请酌情修改. —————————————————————————— 复制文件内容(带权限等信息):有的说 ...
- tar 解压出错
今天下载了一个Linux内核文件,解压的时候出现了这样的错误: gzip: stdin: unexpected end of file tar: Unexpected EOF in archive t ...
- seq
Linux 中seq 命令的用法 用于产生从某个数到另外一个数之间的所有整数 用法: seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 增量 尾数 ...