當(dāng)前位置：首頁(yè) > 运维知识 > windows >内容正文

windows

EXT.NET复杂布局（四）——系统首页设计（下）

發(fā)布時(shí)間：2024/1/17 windows 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 EXT.NET复杂布局（四）——系统首页设计（下）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

此篇為EXT.NET系列終結(jié)篇。希望此系列能夠?qū)Υ蠹矣兴鶐椭?/p>

首頁(yè)JS函數(shù)介紹

使然使用了Ext.NET，但是JavaScript的地位還是舉足輕重的。

1.添加選項(xiàng)卡

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('溫馨提示', '我已經(jīng)關(guān)閉啦！'); 30: } 31: }, 32: html: '<iframe alt" > 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事件，這個(gè)事件可以在窗口關(guān)閉后通知你，有了這個(gè)通知事件，想干啥都方便了。在示例中，本人是顯示消息。

頁(yè)面布局

從圖中可以看出分為上、中、左、右四塊，前面介紹過(guò)了，就不細(xì)說(shuō)了。

之所以使用Viewport，主要是為了自適應(yīng)瀏覽器。值得注意的是，將一個(gè)頁(yè)面分割幾塊，通常使用BorderLayout，其下有North、West、Center、East、South五個(gè)元素，其Collapsible屬性指示是否隱藏面板，比如本示例的East面板。West這里放置左側(cè)菜單，支持無(wú)限子集。為了有折疊面板的效果，需要設(shè)置Layout="AccordionLayout"。然后在后臺(tái)動(dòng)態(tài)添加TreePanel。

值得注意的是Center面板：

可以看出Center面板中放置了選項(xiàng)卡面板（TabPanel），主要到Plugins元素中的TabScrollerMenu控件，作用如圖：

至于Panel，能讓其自動(dòng)加載框架頁(yè)。TriggerEvent="show" 表示顯示的時(shí)候加載。

可以看出，工作臺(tái)那塊都在Url="/WorkbenchMain.aspx" 設(shè)置。注意/表示網(wǎng)站根目錄，只有發(fā)布到IIS或者Web應(yīng)用程序有效。

工作臺(tái)

工作臺(tái)是非常重要的一塊。

有時(shí)候?yàn)榱孙@示重要信息，可能需要以不同顏色顯示，那么注意下面的JS：

var template = '<b >{0}</b>'; var setTitle = function (value, metadata, record, rowIndex, colIndex, store) {return String.format(template, value, 'green'); };

在上面的代碼中，你可以根據(jù)值來(lái)判斷顯示什么樣的HTML，這里是粗體加綠。

自適應(yīng)區(qū)域：

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', '測(cè)a試?頁(yè)3', true);}

這里顯示的是我的測(cè)試頁(yè)，你可以在這里顯示自定義頁(yè)面，并且可以傳遞工作臺(tái)中面板中的Json數(shù)據(jù)。

在這里，我在工作臺(tái)也添加了一個(gè)彈出窗口的JS函數(shù)，這么做的原因是，從這里打開(kāi)窗口處理完事項(xiàng)，我可以刷新工作臺(tái)的數(shù)據(jù)，甚至是指定的面板的數(shù)據(jù)，也就是在beforedestroy事件中，reload相應(yīng)的store。

在工作臺(tái)，本人寫(xiě)了一些處理的JS，大家可以根據(jù)自己需要更改，并且剪切到獨(dú)立的JS文件中去。

比如這個(gè)函數(shù)：

1: function showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName) { 2: Ext.MessageBox.show({ 3: title: '批注', 4: msg: '請(qǐng)輸入批注：', 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 + '必須填寫(xiě)批注，請(qǐng)?zhí)顚?xiě)。'); 19: } 20: else if (btn == 'cancel') 21: Ext.MessageBox.alert('溫馨提示', '操作已取消（' + tip + '必須填寫(xiě)批注）。'); 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: }

用來(lái)判斷相應(yīng)的操作類型，假如是退回或者撤銷，則必須填寫(xiě)批注。如：

至于其他的代碼，我就不多介紹了，篇幅有限，精力有限。

工作臺(tái)的代碼，其他篇幅有部分介紹，可以參考EXT.NET復(fù)雜布局（一）——工作臺(tái)。

處理面板頂部工具欄有不少按鈕，如何動(dòng)態(tài)添加這些按鈕（可以根據(jù)用戶權(quán)限和事項(xiàng)判斷），代碼如下：

1: /// <summary> 2: /// 向工具條添加按鈕 3: /// </summary> 4: /// <param name="icon">圖標(biāo)</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: //設(shè)置Click事件的Handler，用于操作所選項(xiàng)。操作參數(shù)（所選記錄集、操作Code） 26: if (toolbar.Items.Count > 0) 27: toolbar.Items.Add(new ToolbarSeparator()); 28: toolbar.Items.Add(_btn); 29: }

ToolbarSeparator表示分割線，比如：

在String.Format中，兩個(gè)大括號(hào)代表一個(gè)大括號(hào)哦。

表單

還記得那個(gè)測(cè)試頁(yè)么，在工作臺(tái)彈出窗口后，窗口加載的是框架頁(yè)，那么在這個(gè)框架頁(yè)中，我們?nèi)绾侮P(guān)閉這個(gè)窗口呢？比如提交數(shù)據(jù)完畢的時(shí)候。其實(shí)只需要輸出這段腳本即可：

top.Ext.getCmp('frmStatesRequestList').destroy();

在這個(gè)框架頁(yè)中，我們也可以調(diào)用首頁(yè)消息函數(shù)，比如：

top.showMsg('溫馨提示', '歡迎進(jìn)入該頁(yè)面！');

關(guān)于表單的一些介紹，請(qǐng)看EXT.NET復(fù)雜布局（三）——復(fù)雜表單布局。

尾聲

從使用EXT.NET到現(xiàn)在，也差不多一年了，真正使用的時(shí)間也只有幾個(gè)月而已。現(xiàn)在回想起來(lái)，還是感慨良多。

回想當(dāng)初上手的時(shí)候，不僅ext不熟悉，而且對(duì)EXT.NET也一無(wú)所知，中間碰到過(guò)許多問(wèn)題，但是挺過(guò)來(lái)了，而且還留下了自己的足跡。希望我的帖子能夠幫助各位更快的掌握EXT以及EXT.NET，也希望能為EXT.NET的資料庫(kù)添加塊磚片瓦。

最后，附上源碼。

轉(zhuǎn)載于:https://www.cnblogs.com/Areas/archive/2012/03/26/2417834.html

總結(jié)

以上是生活随笔為你收集整理的EXT.NET复杂布局（四）——系统首页设计（下）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： DotNetNuke的升级路径
下一篇： Windows 7备份、还原功能详解