Ext.NET 4.1.0 搭建頁面布局

Ext.NET目前的最新版本為4.1.0，可以從官網：ext.net上下載，具體下載網址為：http://ext.net/download/。

文件下載下來后，在\lib\目錄下存在3個文件夾，分別對應不同的版本，我這里使用net40下的dll，使用的開發工具是visual studio 2013。

先來看一下最終的效果圖：

第一步：首先部署開發環境：

步驟1：新建一個ASP.NET Web應用程序，空項目即可。

步驟2：引入dll，net40下的所有dll(包括：Ext.Net.dll、Ext.Net.Utilities.dll、Newtonsoft.Json.dll、Transformer.NET.dll)，如下圖：

步驟3：添加內容到配置文件(Web.config)。在下載下來的文件中，有個“1. README.md”，里面有具體的配置文件內容，在這里我貼出我所用到的：

<?xml version="1.0" encoding="utf-8"?>

<configuration>
  <configSections>
    <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
  </configSections>
  <extnet theme="Triton" licenseKey="** Ext.NET LICENSE KEY HERE **" initScriptMode="Linked" />
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
    <pages>
      <controls>
        <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
      </controls>
      <namespaces>
        <add namespace="Ext.Net"/>
      </namespaces>
    </pages>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
    </modules>
    <handlers>
      <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
    </handlers>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-8.0.0.0" newVersion="8.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
        <bindingRedirect oldVersion="0.0.0.0-2.5.0" newVersion="2.5.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
        <bindingRedirect oldVersion="0.0.0.0-2.1.1" newVersion="2.1.1" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>

</configuration>

至此，配置完成，下面就可以來體驗一下Ext.NET(版本4.1.0)的功能了。

添加一個Web窗體，然后就可以看到ext:控件了，注意：如果ext:控件沒有出來，清理新生成一下或者等一會就可以了。

 <ext:Button ID="btnLogin" runat="server" Text="登錄" />

如下圖：

第二步：搭建布局

整個布局分為三個部分：North、West和Center。North塊基本上為固定的區域；Center塊為主要業務處理塊，對於West區域的每個菜單項都將會顯示在Center塊中。

這三個部分用Region="North"、Region="West"、Region="Center"來區分，這個和以前的版本有所不同。

1. North

整個頁面的北面，即頂部，用一個面板(Panel)來刻畫。代碼如下：(這里需要用到一張圖片top.jpg)

<ext:Panel ID="NorthPanel" Region="North" runat="server">
     <Content>
           <div style="background-image: url('image/top.jpg'); height: 70px;">
           </div>
      </Content>
</ext:Panel>

2.West

整個頁面的西部，即各個菜單項所在之處，在這里我只寫了2個菜單，如果需要直接在下面添加即可，代碼如下：

<ext:Panel ID="WestPanel" runat="server" Split="true" Region="West" Width="200" Layout="AccordionLayout" CollapseMode="Header">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Title="信息查看" CollapseMode="Header" Icon="ApplicationEdit"
                        AutoScroll="true" Layout="FitLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="公司信息" Icon="Application" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="職位信息" Icon="Application" Href="#" Leaf="true" Qtip="職位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="員工信息" Icon="Application" Href="#" Leaf="true" Qtip="員工入職">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{TabPanel1}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Title="開始管理" Icon="ApplicationAdd" Collapsible="true" CollapseMode="Header"
                        AutoScroll="true" Layout="AbsoluteLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel2" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="員工管理" Icon="UserMagnify" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="職位信息管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="職位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="工資管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="員工入職">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{TabPanel1}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </Items>
</ext:Panel>

3.Center

整個頁面的中部，業務處理模塊部分，代碼如下：

<ext:TabPanel ID="CenterPanel" Region="Center" runat="server">
                <Items>
                    <ext:Panel ID="CenterTab1" runat="server" Icon="House" Title="歡迎" Border="false">
                        <Loader Url="Welcome.htm" runat="server" AutoLoad="true" />
                    </ext:Panel>
                </Items>
                <Plugins>
                    <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" CloseTabText="關閉" CloseOtherTabsText="除此之外全部關閉"
                        CloseAllTabsText="關閉所有窗口" />
                </Plugins>
</ext:TabPanel>

上面介紹了布局的基本情況，下面介紹核心步驟：如何將各個菜單項在Center部分依次顯示出來，在ext.net官網的Examples中(網址：http://examples.ext.net/#/TreePanel/Basic/SiteMap/)給出了在后台加載節點的方式，這里我要給出的是直接在ext:node中給出節點。下面給出點擊菜單項加載到Center的ExtJS代碼：

<script type="text/javascript">
        var addTab = function (tabPanel, record) {
            var id = record.id;
            var url = record.data.url;
            var text = record.data.text;
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        scripts: true,
                        mode: "iframe",
                        url: url,
                        maskMsg: "正在加載：<span style='font-weight:bold'>" + text + "</span> 頁面..."
                    }
                });
            }
            tabPanel.setActiveTab(tab);
        }
    </script>

至此，所有工作都已經完成，下面給出整個頁面的所有代碼(可以直接運行)。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="ExtNETLayout.Main" %>

<!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></title>
    <script type="text/javascript">
        var addTab = function (tabPanel, record) {
            var id = record.id;
            var url = record.data.url;
            var text = record.data.text;
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        scripts: true,
                        mode: "iframe",
                        url: url,
                        maskMsg: "正在加載：<span style='font-weight:bold'>" + text + "</span> 頁面..."
                    }
                });
            }
            tabPanel.setActiveTab(tab);
        }
    </script>
</head>
<body>

    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Default" />
    <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="Panel3" Region="North" runat="server">
                <Content>
                    <div style="background-image: url('image/top.jpg'); height: 70px;">
                    </div>
                </Content>
            </ext:Panel>
            <ext:Panel ID="WestPanel" runat="server" Split="true" Region="West" Width="200" Layout="AccordionLayout" CollapseMode="Header">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Title="信息查看" CollapseMode="Header" Icon="ApplicationEdit"
                        AutoScroll="true" Layout="FitLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="公司信息" Icon="Application" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="職位信息" Icon="Application" Href="#" Leaf="true" Qtip="職位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="員工信息" Icon="Application" Href="#" Leaf="true" Qtip="員工入職">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{CenterPanel}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Title="開始管理" Icon="ApplicationAdd" Collapsible="true" CollapseMode="Header"
                        AutoScroll="true" Layout="AbsoluteLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel2" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="員工管理" Icon="UserMagnify" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="職位信息管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="職位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="工資管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="員工入職">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{CenterPanel}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
            <ext:TabPanel ID="CenterPanel" Region="Center" runat="server">
                <Items>
                    <ext:Panel ID="CenterTab1" runat="server" Icon="House" Title="歡迎" Border="false">
                        <Loader Url="Welcome.htm" runat="server" AutoLoad="true" />
                    </ext:Panel>
                </Items>
                <Plugins>
                    <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" CloseTabText="關閉" CloseOtherTabsText="除此之外全部關閉"
                        CloseAllTabsText="關閉所有窗口" />
                </Plugins>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>

最后，給出需要注意的地方：

1.<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Default" />這句話不可少，Theme為主題，也可以說成皮膚，可以自行設定；

2.Info.aspx、Mation.aspx，需要新建這兩個頁面；

3.更多信息見ext.net官網。

有了上面的布局，就可以很輕松的完成相關的管理系統。

以上只是個人理解。