此篇為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