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

来源:http://www.cnblogs.com/zhangtingzu/archive/2016/12/10/6155522.html
-Advertisement-
Play Games

Ext.NET 4.1 系統框架的搭建(後臺) 附源碼 代碼運行環境:.net 4.5 VS2013 (代碼可直接編譯運行) 預覽圖: 分析圖: 上面系統的構建包括三塊區域:North、West和Center: North負責顯示系統信息,包括系統圖片、當前時間、登錄信息、退出登錄等功能。 West ...


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

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

預覽圖:

分析圖:

上面系統的構建包括三塊區域:NorthWestCenter

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vs支持多種語言,但有可能創建項目時,預設的開發語言不是你需要的,比如:預設是Visual C++ 你可以通過"工具"----選項----導入和導出設置來修改。 引用: https://weblogs.asp.net/sreejukg/change-default-language-settings... ...
  • string 與 String,大 S 與小 S 之間有關字元串的秘密 字元串是 String 類型的對象,它的值是文本。 在內部,文本被存儲為 Char 對象的順序只讀集合。 C# 字元串末尾沒有以 null 結尾的字元;因此 C# 字元串可以包含任意數目的嵌入式 null 字元(“\0”)。 字 ...
  • 最近在熟悉Abp框架,其基於DDD領域驅動設計。。。前段可以繞過mvc直接調用根據app層動態生成的webapi,有點神奇~,Web API之前有簡單接觸過,WCF的輕量級版,一般用於做一寫開發性的服務介面,形式上類似與MVC,只是不渲染視圖(其他基於restful設計什麼的我不想去扯)。 因此我的 ...
  • C# 介面(Interface) 介面定義了所有類繼承介面時應遵循的語法合同。介面定義了語法合同 "是什麼" 部分,派生類定義了語法合同 "怎麼做" 部分。 介面定義了屬性、方法和事件,這些都是介面的成員。介面只包含了成員的聲明。成員的定義是派生類的責任。介面提供了派生類應遵循的標準結構。 抽象類在 ...
  • 系統中經常會使用導出Excel的功能。 之前使用的是NPOI,但是導出數據行數多就報記憶體溢出。 最近看到EPPlus可以用來導出Excel,就自己測了下兩者導出上的差異。 NPIO官網地址:http://npoi.codeplex.com/ EPPlus官網地址:http://epplus.code ...
  • 文章作者 Julie Lerman 是 Microsoft MVP、.NET 導師和顧問,住在佛蒙特州的山區。您可以在全球的用戶組和會議中看到她對數據訪問和其他 .NET 主題的演示。她的博客地址是 [thedatafarm.com/blog][1]。她是“ Entity Framework 編程 ...
  • 【博主】反骨仔 【出處】http://www.cnblogs.com/liqingwen/p/6155694.html ...
  • IIS7.0 IIS7.0主要引入了WAS(Windows Process Activation,不同於6.0中的Web Admin Service),分擔了原來w3svc的部分功能,同時為IIS7.0提供了非HTTP協協議的支持,通過適配器介面(Listener Adapter Interface ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...