天天看點

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

此篇為EXT.NET系列終結篇。希望此系列能夠對大家有所幫助。

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

1.添加頁籤

注意maskMsg,它有以下效果:

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

2.顯示消息

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

3.彈出視窗

注意beforedestroy事件,這個事件可以在視窗關閉後通知你,有了這個通知事件,想幹啥都友善了。在示例中,本人是顯示消息。

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

從圖中可以看出分為上、中、左、右四塊,前面介紹過了,就不細說了。

之是以使用Viewport,主要是為了自适應浏覽器。值得注意的是,将一個頁面分割幾塊,通常使用BorderLayout,其下有North、West、Center、East、South五個元素,其Collapsible屬性訓示是否隐藏面闆,比如本示例的East面闆。West這裡放置左側菜單,支援無限子集。為了有折疊面闆的效果,需要設定Layout="AccordionLayout"。然後在背景動态添加TreePanel。

值得注意的是Center面闆:

可以看出Center面闆中放置了頁籤面闆(TabPanel),主要到Plugins元素中的TabScrollerMenu控件,作用如圖:

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

至于Panel,能讓其自動加載架構頁。TriggerEvent="show" 表示顯示的時候加載。

可以看出,工作台那塊都在Url="/WorkbenchMain.aspx" 設定。注意/表示網站根目錄,隻有釋出到IIS或者Web應用程式有效。

工作台是非常重要的一塊。

有時候為了顯示重要資訊,可能需要以不同顔色顯示,那麼注意下面的JS:

在上面的代碼中,你可以根據值來判斷顯示什麼樣的HTML,這裡是粗體加綠。

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

自适應區域:

彈出窗體:

這裡顯示的是我的測試頁,你可以在這裡顯示自定義頁面,并且可以傳遞工作台中面闆中的Json資料。

在這裡,我在工作台也添加了一個彈出視窗的JS函數,這麼做的原因是,從這裡打開視窗處理完事項,我可以重新整理工作台的資料,甚至是指定的面闆的資料,也就是在beforedestroy事件中,reload相應的store。

在工作台,本人寫了一些處理的JS,大家可以根據自己需要更改,并且剪切到獨立的JS檔案中去。

比如這個函數:

用來判斷相應的操作類型,假如是退回或者撤銷,則必須填寫批注。如:

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

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

處理面闆頂部工具欄有不少按鈕,如何動态添加這些按鈕(可以根據使用者權限和事項判斷),代碼如下:

ToolbarSeparator表示分割線,比如:

EXT.NET複雜布局(四)——系統首頁設計(下)首頁JS函數介紹頁面布局工作台表單尾聲

在String.Format中,兩個大括号代表一個大括号哦。

還記得那個測試頁麼,在工作台彈出視窗後,視窗加載的是架構頁,那麼在這個架構頁中,我們如何關閉這個視窗呢?比如送出資料完畢的時候。其實隻需要輸出這段腳本即可:

在這個架構頁中,我們也可以調用首頁消息函數,比如:

從使用EXT.NET到現在,也差不多一年了,真正使用的時間也隻有幾個月而已。現在回想起來,還是感慨良多。

回想當初上手的時候,不僅ext不熟悉,而且對EXT.NET也一無所知,中間碰到過許多問題,但是挺過來了,而且還留下了自己的足迹。希望我的文章能夠幫助各位更快的掌握EXT以及EXT.NET,也希望能為EXT.NET的資料庫添加塊磚片瓦。

繼續閱讀