·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> Ext.NET-布局篇

【如有意向点此提交需求】关于我们

Ext.NET-布局篇

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

Ext.NET-布局篇

概述

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

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

本文目的

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

顶端：使用Panel，可折叠；左侧：使用TreePanel，可折叠;中间：使用GridPanel，主要区域，不可折叠；底部：使用GridPanel，可折叠；

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

整体布局

LayoutDemo_800x600

全部折叠后的效果

全部折叠

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

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

运行效果如下

ViewportDemo

说明

  1. Viewport中的<Items>...</Items>,Items中只能定义Ext.NET提供的控件，而有时候我们需要写一些HTML或asp.net自带的控件，请使用'',如<Content><div>...</div></Content>
  2. 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>