EXT.NET複雜佈局(四)——系統首頁設計(下)
此篇為EXT.NET系列終結篇。希望此係列能夠對大家有所幫助。
首頁JS函式介紹
使然使用了Ext.NET,但是JavaScript的地位還是舉足輕重的。
1.新增選項卡
1: var addTab = function (id, url, title) {
2: var tab = tplCenter.getComponent(id);
3: if (!tab) {
4: tab = tplCenter.add({
5: id: id,
6: title: title,
7: closable: true,
8: autoLoad: {
9: showMask: true,
10: url: url,
11: mode: "iframe",
12: maskMsg: "正在載入 "+ title + " ..."
13: }
14: });
15: }
16: tplCenter.setActiveTab(tab);
17: }
注意maskMsg,它有以下效果:
2.顯示訊息
1: function showMsg(title, content) {
2: Ext.net.Notification.show({
3: hideFx: {
4: fxName: 'switchOff',
5: args: [{}]
6: },
7: showFx: {
8: args: [
9: 'C3DAF9',
10: 1,
11: {
12: duration: 2.0
13: }
14: ],
15: fxName: 'frame'
16: },
17: closeVisible: true,
18: html: content,
19: title: title + ' ' + new Date().format('g:i:s A')
20: });
21: }
3.彈出視窗
1: function showMyWindow(url, id, title, isMaximized) {
2: url += ((url.indexOf('?') == -1 ? ("?rand=") : ("&rand=")) + Math.round(Math.random() * 10000));
3: var myWin = new Ext.Window({
4: id: id,
5: title: title,
6: width: 572,
7: height: 290,
8: iconCls: "addicon",
9: resizable: false,
10: draggable: true,
11: defaultType: "textfield",
12: labelWidth: 100,
13: collapsible: false,
14: closeAction: 'close',
15: closable: true,
16: maximizable: true,
17: maximized: arguments.length == 4 ? isMaximized : false,
18: modal: true,
19: buttonAlign: "center",
20: bodyStyle: "padding:0 0 0 0",
21: listeners: { "beforedestroy": function (obj) {
22: var tabs = top.tabs;
23: if (typeof tabs != undefined && tabs != null) {
24: if (top.tabs.items.getCount() > 1) {
25: var currentTab = tabs.getActiveTab();
26: tabs.remove(currentTab);
27: }
28: }
29: top.showMsg('溫馨提示', '我已經關閉啦!');
30: }
31: },
32: html: '<iframe style="margin-left:0px;margin-top:0px;border:0;' +
33: 'border-style:solid;border-color:red;" width="100%" height="100%" ' +
34: ' id="frmWin' + id + '" src="' + url + '" name="' + id + '" />'
35: });
36: myWin.show();
37: }
注意beforedestroy事件,這個事件可以在視窗關閉後通知你,有了這個通知事件,想幹啥都方便了。在示例中,本人是顯示訊息。
頁面佈局
從圖中可以看出分為上、中、左、右四塊,前面介紹過了,就不細說了。
之所以使用Viewport,主要是為了自適應瀏覽器。值得注意的是,將一個頁面分割幾塊,通常使用BorderLayout,其下有North、West、Center、East、South五個元素,其Collapsible屬性指示是否隱藏面板,比如本示例的East面板。West這裡放置左側選單,支援無限子集。為了有摺疊面板的效果,需要設定Layout="AccordionLayout"。然後在後臺動態新增TreePanel。
值得注意的是Center面板:
<Center MarginsSummary="5 5 5 0"> <ext:TabPanel runat="server" ID="tplCenter" IDMode="Static" ResizeTabs="true" Border="true" MinTabWidth="75" TabWidth="135" EnableTabScroll="true"> <Plugins> <ext:TabScrollerMenu ID="TabScrollerMenu1" runat="server" /> </Plugins> <Items> <ext:Panel ID="Panel1" runat="server" TabMenuHidden="true" Title="工作臺" TabTip="工作臺" Closable="false"> <AutoLoad Url="/WorkbenchMain.aspx" Mode="IFrame" TriggerEvent="show" ShowMask="true" /> </ext:Panel> </Items> </ext:TabPanel> </Center>
可以看出Center面板中放置了選項卡面板(TabPanel),主要到Plugins元素中的TabScrollerMenu控制元件,作用如圖:
至於Panel,能讓其自動載入框架頁。TriggerEvent="show" 表示顯示的時候載入。
可以看出,工作臺那塊都在Url="/WorkbenchMain.aspx" 設定。注意/表示網站根目錄,只有釋出到IIS或者Web應用程式有效。
工作臺
工作臺是非常重要的一塊。
有時候為了顯示重要資訊,可能需要以不同顏色顯示,那麼注意下面的JS:
var template = '<b style="color:{1};">{0}</b>'; var setTitle = function (value, metadata, record, rowIndex, colIndex, store) { return String.format(template, value, 'green'); };
在上面的程式碼中,你可以根據值來判斷顯示什麼樣的HTML,這裡是粗體加綠。
自適應區域:
function autoSizeArea() { var vHeight = Viewport1.getHeight(); pnlView.setHeight(vHeight); vHeight = vHeight - 150; GridPanel1.setHeight(vHeight); GridPanel3.setHeight(vHeight); GridPanel2.setHeight(vHeight); GridPanel6.setHeight(vHeight); GridPanel5.setHeight(vHeight); }
彈出窗體:
function showTestPage() { top.showMyWindow('/Test.aspx', 'frmStatesRequestList', '測a試?頁3', true); }
這裡顯示的是我的測試頁,你可以在這裡顯示自定義頁面,並且可以傳遞工作臺中面板中的Json資料。
在這裡,我在工作臺也添加了一個彈出視窗的JS函式,這麼做的原因是,從這裡開啟視窗處理完事項,我可以重新整理工作臺的資料,甚至是指定的面板的資料,也就是在beforedestroy事件中,reload相應的store。
在工作臺,本人寫了一些處理的JS,大家可以根據自己需要更改,並且剪下到獨立的JS檔案中去。
比如這個函式:
1: function showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName) {
2: Ext.MessageBox.show({
3: title: '批註',
4: msg: '請輸入批註:',
5: width: 300,
6: buttons: Ext.MessageBox.OKCANCEL,
7: multiline: true,
8: fn: function (btn, text) {
9: var remark = text.replace(/(^\s*)|(\s*$)/g, '');
10: if (TypeID == 'Reject' || TypeID == 'Repeal') {
11: var tip = '';
12: if (TypeID == 'Reject')
13: tip = '【退回】';
14: if (TypeID == 'Repeal')
15: tip = '【撤銷】';
16: if (remark == '' && btn == 'ok') {
17: showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName);
18: alert(tip + '必須填寫批註,請填寫。');
19: }
20: else if (btn == 'cancel')
21: Ext.MessageBox.alert('溫馨提示', '操作已取消(' + tip + '必須填寫批註)。');
22: else if (remark != '' && btn == 'ok')
23: Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark);
24: }
25: else {
26: if (btn == 'ok')
27: Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark);
28: else
29: Ext.MessageBox.alert('溫馨提示', '操作已取消。');
30: }
31: },
32: animEl: animEl
33: });
34: }
用來判斷相應的操作型別,假如是退回或者撤銷,則必須填寫批註。如:
至於其他的程式碼,我就不多介紹了,篇幅有限,精力有限。
處理面板頂部工具欄有不少按鈕,如何動態新增這些按鈕(可以根據使用者許可權和事項判斷),程式碼如下:
1: /// <summary>
2: /// 向工具條新增按鈕
3: /// </summary>
4: /// <param name="icon">圖示</param>
5: /// <param name="text">文字</param>
6: /// <param name="facode">操作Code</param>
7: /// <param name="toolbar">工具條</param>
8: /// <param name="_panelName">容器ID</param>
9: private static void SetButton(Icon icon, string text, FACodeEnum facode, Toolbar toolbar, string _panelName)
10: {
11: if (toolbar == null) throw new ArgumentNullException("toolbar");
12: var _btn = new Ext.Net.Button
13: {
14: Icon = icon,
15: Text = text,
16: Listeners =
17: {
18: Click =
19: {
20: Handler =
21: string.Format("toExcuteOperations(#{{{0}}}.getSelectionModel().getSelections(),'{1}');", _panelName, facode.ToString())
22: }
23: }
24: };
25: //設定Click事件的Handler,用於操作所選項。操作引數(所選記錄集、操作Code)
26: if (toolbar.Items.Count > 0)
27: toolbar.Items.Add(new ToolbarSeparator());
28: toolbar.Items.Add(_btn);
29: }
ToolbarSeparator表示分割線,比如:
在String.Format中,兩個大括號代表一個大括號哦。
表單
還記得那個測試頁麼,在工作臺彈出視窗後,視窗載入的是框架頁,那麼在這個框架頁中,我們如何關閉這個視窗呢?比如提交資料完畢的時候。其實只需要輸出這段指令碼即可:
top.Ext.getCmp('frmStatesRequestList').destroy();
在這個框架頁中,我們也可以呼叫首頁訊息函式,比如:
top.showMsg('溫馨提示', '歡迎進入該頁面!');
尾聲
從使用EXT.NET到現在,也差不多一年了,真正使用的時間也只有幾個月而已。現在回想起來,還是感慨良多。
回想當初上手的時候,不僅ext不熟悉,而且對EXT.NET也一無所知,中間碰到過許多問題,但是挺過來了,而且還留下了自己的足跡。希望我的帖子能夠幫助各位更快的掌握EXT以及EXT.NET,也希望能為EXT.NET的資料庫新增塊磚片瓦。
最後,附上轉載地址。
http://www.cnblogs.com/codelove/archive/2012/01/05/2313765.html
相關推薦
EXT.NET複雜佈局(四)——系統首頁設計(下)
此篇為EXT.NET系列終結篇。希望此係列能夠對大家有所幫助。 首頁JS函式介紹 使然使用了Ext.NET,但是JavaScript的地位還是舉足輕重的。 1.新增選項卡 1: var addTab = function (id, url, title) { 2:
EXT.NET複雜佈局(四)——系統首頁設計(上)
本篇主要講述頁面設計與效果,下篇將講述編碼並提供原始碼下載。 系統首頁設計往往是個難點,因為往往要考慮以下因素: 重要通知系統功能選單快捷操作日常維護工作(比如待辦事項、已辦事項等等)使用者資訊(比如公司、部門、組織機構)系統資訊(意見反饋、幫助等)聯絡溝通等等又要兼顧美觀
EXT.NET複雜佈局(二)——報表
前面提到過工作臺(《EXT.NET複雜佈局(一)——工作臺》)了,不知道各位看過之後有什麼感想。這次就介紹介紹使用EXT.NET畫幾個報表。 看圖寫作從小學就開始了,如圖: 圖一 圖二 圖三(1) 圖三(2) 各位看官,不要以為這報表畫起來很難,其實使用EXT.NET來畫的話,
three.js的wave特效(ivew官網首頁波浪特效實現)
alt 使用 實現 功夫 inf 有效 訪問 顏色 index 查看效果請訪問:https://521lbx.github.io/Web3D/index.html公司的好幾個vue項目都是用ivew作為UI框架,所以ivew官網時不時就得逛一圈。每一次進首頁都會被首頁的波浪
仿照(小米官網首頁輪播圖)特效js程式碼
最近跟輪播圖槓上了,以前也接觸過這個輪播圖的寫法,但是一般都是用外掛,久而久之就忘記了!昨晚有學習了一下自己寫這個js,雖然是依靠零散的記憶寫出來的,可能自己並未真正理解吧!!!以下是我寫的程式碼:&
Linux基礎(文件系統以及文件類型)
variable character 共享 srv HA init 6 系統管 cache lib64 最近重新復習了下linux的知識,打算在此地開啟博客來備份和知識溫故知新。 1、linux文件系統以及文件類型: /boot:引導文件存放目錄,內核文件(vmlinuz)
實戰Java高併發程式設計(四、鎖的優化及注意事項)
在多核時代,使用多執行緒可以明顯地提升系統的效能。但事實上,使用多執行緒會額外增加系統的開銷。對於單任務或單執行緒的應用來說,其主要資源消耗在任務本身。對於多執行緒來說,系統除了處理功能需求外,還需要維護多執行緒環境特有的資訊,如執行緒本身的元資料,執行緒的排程,執行緒上下文的切換等。 4.1有
【軟考】——軟體工程基礎知識(Web應用系統分析與設計)
WebApp的特性 WebApp屬性???——》網路密集性、併發性、無法預知的負載量、效能、可用性、資料驅動; web應用系統分析的模型型別???——》 內容模型???——》給出由Web應
vue專案實戰(二)之首頁layout佈局
一、替換顯示頁面 1.在 src/components目錄下新建Layout.vue檔案: <template> <div> <h2>header</h2> <h2>con
Winform/C#入門程式設計之第二部分常用控制元件(四:複選框控制元件CheckBox)
簡介: 介紹複選框控制元件CheckBox。常用在某些功能的是否啟用判斷。 介紹: 1.屬性 常用屬性 Name 獲取或設定控制元件的名稱。
系統分析與設計(8)
1、軟體架構與框架 軟體架構(architecture) 軟體架構就是把系統分解為一些部件,描述這些部件的職責以及它們之間的協作行為,是有關整體結構與元件的抽象描述,用於指導大型軟體系統各個方面的設計。 軟體架構決策涉及到軟體系統核心(主體、基礎)結構的組
開源跳板機(堡壘機)系統 Jumpserver安裝教程(帶圖文)
環境 系統: CentOS 7 IP: 192.168.244.144 關閉 selinux 和防火牆 # CentOS 7 $ setenforce 0 # 可以設定配置檔案永久關閉 $ systemctl stop iptables.service $ systemctl st
工資管理系統——總體分析設計(原創文件)
隨著我國國民經濟建設的蓬勃發展,各個行業都在積極使用現代化的手段,不斷改善服務質量,提高工作效率,這些都在很大程度上給企業提出越來越嚴峻的挑戰,對企業體系無論是在行政職能、企業管理水平以及優質服務上都提出更高的要求。建設一個科學高效的資訊管理系統是解決這一問題的必由之路。企業內部財務管理是該企業運用現代化技術
CMS系統模版引擎設計(1):基礎型別
/// <summary> /// 模版類 /// </summary> public class Template { /// <summary> /// 模版ID /// <
c# MEF框架(四 見證奇蹟的時刻之實戰應用)
轉自 http://www.cnblogs.com/yunfeifei/p/3940075.html 前面三篇講了MEF的基礎和基本到匯入匯出方法,下面就是見證MEF真正魅力所在的時刻。如果沒有看過前面的文章,請到我的部落格首頁檢視。 前面我們都是在一個專案中寫
簡易線上投票系統(php)——前端設計(投票頁面的原始碼)
投票頁面的原始碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &
狗屎一樣的React(第四節,首頁banner圖輪播)
這一節,我們來看一個banner圖輪播,banner圖輪播是一個比較常用的需求,而且幾乎每個網站,每個app都會有一個banner圖輪播的效果,也不知道是誰創造出來的。 1、banner圖一般都是從檔案伺服器獲取的,也就是需要發請求獲取資料,需要發ajax請求,這裡我們需要
CentOS 7 系列(二)系統服務配置--單元(Unit)
設定單元的啟動頻率限制。 預設情況下,一個單元在10秒內最多允許啟動5次。 StartLimitIntervalSec= 用於設定時長, 預設值等於 DefaultStartLimitIntervalSec= 的值(預設為10秒),設為 0 表示不作限制。 StartLimitBurst= 用於設定在一段給
系統分析與設計(5)
領域建模 閱讀 Asg_RH 文件,按用例構建領域模型。 資料庫建模(E-R 模型) E-R模型如下圖所示 資料庫匯出指令碼如下: -- MySQL Script generated by MySQL Workbench -- Mon
大學畢業4年-回顧和總結(10)-資金賬務系統的架構設計(產品視角+技術視角)(圖文並茂)
背景 2014年和2015年開發P2P網貸系統的時候,某大牛有設計了一套簡潔實用的資金賬戶系統。 系統設計主要是為了服務於P2P網貸等系統,資金賬務系統可以作為一個獨立的子系統對外提供服務。 本系統,我基本沒有寫過幾行程式碼,更多是學習,理解別人的架