此篇為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: }
用來判斷相應的操作類型，假如是退回或者撤銷，則必須填寫批注。如：
至於其他的代碼，我就不多介紹了，篇幅有限，精力有限。
工作台的代碼，其他篇幅有部分介紹，可以參考EXT.NET復雜布局（一）——工作台。
處理面板頂部工具欄有不少按鈕，如何動態添加這些按鈕（可以根據用戶權限和事項判斷），代碼如下：
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.NET到現在，也差不多一年了，真正使用的時間也只有幾個月而已。現在回想起來，還是感慨良多。
回想當初上手的時候，不僅ext不熟悉，而且對EXT.NET也一無所知，中間碰到過許多問題，但是挺過來了，而且還留下了自己的足跡。希望我的帖子能夠幫助各位更快的掌握EXT以及EXT.NET，也希望能為EXT.NET的資料庫添加塊磚片瓦。
最后，附上源碼。