前一篇介紹了Ext.NET基礎知識，并對Ext.NET布局進行了簡要的說明，本文中我們用一個完整的示例代碼來看看Ext.NET的布局。
示例代碼下載地址>>>>>
本文使用Tree、Grid應該是我們最為常用的控件，實現自適應的頁面布局，
頂端：使用Panel，可折疊；左側：使用TreePanel，可折疊;中間：使用GridPanel，主要區域，不可折疊；底部：使用GridPanel，可折疊；
先看看我們最終實現的效果
整體布局
全部折疊后的效果
當點擊gridMain下的新增按鈕彈出Window
新建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頁面布局示例
為了演示需要我們為每個區域指定不同的背景顏色，在<head></head>添加如下CSS樣式
<style type="text/css"> .north { background-color: #FFFFFF; } .west { background-color: #00FFFF; } .center { background-color: #FF00FF; } .sourth { background-color: #FFFF00; }</style>我們需要實現的是自適應瀏覽器窗口大小(占滿整個<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的值可以為
最終的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>
新聞熱點
疑難解答
