Ext.NET 4.1 系統框架的搭建(後臺) 附源碼

Ext.NET 4.1 系統框架的搭建(後臺) 附源碼

代碼運行環境：.net 4.5  VS2013 (代碼可直接編譯運行)

預覽圖：

分析圖：

上面系統的構建包括三塊區域：North、West和Center：

North負責顯示系統信息，包括系統圖片、當前時間、登錄信息、退出登錄等功能。

West負責顯示菜單導航。

Center負責系統的核心業務處理（這裏的功能是顯示文件夾下的.txt文本名稱，並提供修改和刪除操作）。

 

下面詳細介紹：

整個區域被放在Viewport下，佈局方式爲BorderLayout，該佈局包含North、West和Center三塊面板：

 

<ext:Viewport runat="server" ID="vp1" Layout="BorderLayout">
        <items>
              <ext:Panel ID="Panel1" runat="server" Region="North" Height="100">
              //...
              </ext:Panel>
              <ext:Panel ID="WestPanel" runat="server" Region="West">
              //...
              </ext:Panel>
              <ext:TabPanel ID="Pages" runat="server" Region="Center">
              //...
              </ext:TabPanel>
        </items>
 </ext:Viewport>

North部分：

<ext:Panel ID="Panel1" runat="server" Region="North" Height="100" Header="true" Border="false" Html="<img src='../Images/top.jpg'/>">
                    <BottomBar>
                        <ext:Toolbar ID="ToolbarBottom" runat="server">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFillBottom" runat="server" Width="200">
                                </ext:ToolbarFill>
                                <ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" Width="1" />
                                <ext:Label ID="tbShowTime" runat="server">
                                </ext:Label>
                                <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" Width="1" />
                                <ext:ToolbarTextItem ID="textWelcome" runat="server">
                                </ext:ToolbarTextItem>
                                <ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" Width="1">
                                </ext:ToolbarSeparator>
                                <ext:Button ID="btnExit" runat="server" IconCls="icon-exit" Text="退出系統" ToolTip="退出系統">
                                    <DirectEvents>
                                        <Click OnEvent="btnExit_Click">
                                            <Confirmation ConfirmRequest="true" Title="確認" Message="確實要退出系統嗎？" />
                                            <EventMask ShowMask="true" Msg="正在退出，請稍等 ..." />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
</ext:Panel>

該部分對應的顯示爲：

tbShowTime爲顯示當前時間，textWelcome爲當前登錄的用戶，還有一個退出當前登錄事件：OnEvent="btnExit_Click"。

West部分：

這部分的構建是比較複雜的，首先

<ext:Panel ID="WestPanel" runat="server" Region="West" Width="150" >

</ext:Panel>

這是一個最外層的大的面板，然後裏面嵌入了多個小的面板，這些小的面板這裏爲TreePanel，

比如這裏初始化2個TreePanel：

創建第1個TreePanel：

TreePanel Tpen1 = new TreePanel{};

創建第2個TreePanel：

TreePanel Tpen2 = new TreePanel{};

將2個TreePanel添加的最外層的大的面板中：

WestPanel.Add(Tpen1);

WestPanel.Add(Tpen2);

對於每一個TreePanel下面還有節點，節點下面還有子節點，每個節點下面可以有多個子節點：

所以這裏就需要兩個方法，一個是創建節點的方法，一個是創建子節點的方法。當然也可以只寫一個方法，因爲創建節點的方法和創建子節點方法唯一的區別就是：創建子節點的時候需要將treeNode.Leaf的值設置爲true，含義就是該子節點下面沒有子節點了。

創建子節點的方法爲：

private Node CreateChildNode(string url, string nodeid, string title, string description)
{
      Node treeNode = new Node();

      if (!string.IsNullOrEmpty(url))
      {
           treeNode.CustomAttributes.Add(new ConfigItem("url", this.Page.ResolveUrl(url)));
           treeNode.Href = "#";
      }

      treeNode.NodeID = nodeid;
      treeNode.CustomAttributes.Add(new ConfigItem("hash", nodeid.GetHashCode().ToString()));
      treeNode.Text = title;
      treeNode.Qtip = description;
      //如果是子節點，加上treeNode.Leaf = true;這句
      //treeNode.Leaf = true;
      return treeNode;
}

Center部分：

該部分爲業務處理模塊，對於West菜單欄所請求的信息都會在該部分顯示，所有該部分需要加上鼠標右鍵關閉窗口的功能，包括：關閉所有窗口、除此之外全部關閉、關閉功能。

<ext:TabPanel ID="Pages" runat="server" Region="Center">
         <Plugins>
                <ext:TabCloseMenu ID="TabM1" runat="server" CloseTabText="關閉" CloseOtherTabsText="除此之外全部關閉"
                            CloseAllTabsText="關閉所有窗口" />
        </Plugins>
</ext:TabPanel>

上面區域構建完成之後，僅僅是頁面佈局搭建完成，還有一個核心功能沒有完成，那就是：當用戶點擊West部分的任意一個菜單時，需要在Center部分顯示該請求。

這就需要用到TreePanel的點擊處理請求：

TPen.Listeners.ItemClick.Handler = "if (record.data.url) { loadPage(#{Pages}, record); return false;}";

該功能是用戶通過點擊West部分面板，加載到TPen中去。

當然，還需要前臺js代碼來實現，前臺js代碼爲：

<script type="text/javascript">
        var loadPage = function (tabPanel, record) {
            var tab = tabPanel.getComponent("node" + record.data.hash);
            
            if (!tab) {
                tab = tabPanel.add({
                    id: "node" + record.data.hash,
                    title: record.data.text,
                    closable: true,
                    loader: {
                        url: record.data.url,
                        renderer: "frame",
                        loadMask: {
                            showMask: true,
                            msg: "Loading " + record.data.url + "..."
                        }
                    },
                    tbar: [
                        "-",
                        {
                            text: "刷新",
                            tooltip: "刷新",
                            handler: function () {
                                Ext.getCmp("node" + record.data.hash).reload(true)
                            },
                            iconCls: "icon-arrowrefresh"
                        },
                        "-"
                    ],
                    autoScroll: true
                });
            }

            tabPanel.setActiveTab(tab);
        }
</script>

重點注意一下加粗部分。

至此，所有工作都以及完成了，框架也搭建好了，剩下的就需要我們自己根據業務需求來寫自己的核心業務模塊就可以了。

在這裏還需注意一個問題就是Ext.Net剛開源的時候，流行的破解辦法是通過修改源代碼，但是隨着Ext.NET 2.x以及後續版本的發佈，原作者沒有公佈源代碼，所以導致將程序部署到公網是是需要收費的，會提示購買版權，還好Ext.NET.dll中提供的方法很容易破解，具體破解請參考：

Ext.NET 4.1版本破解方法：http://www.cnblogs.com/zhangtingzu/p/6137612.html

最後提供源碼：(如果該地址不能下載，可以發郵件到我的郵箱：[email protected])

源碼下載地址：http://download.csdn.net/detail/zhangting142857/9707318