Ext JS 大型日曆控制項

Ext JS 大型日曆控制項 標籤： 日曆extcalendarcomponentslayoutborder 2010-09-19 19:41 10719人閱讀 評論(7) 收藏 舉報

目錄(?)[+]

原文：Ext JS 3.3 Calendar Component on September 8, 2010 by Brian Moeskau 對一個成熟的日曆控制項而言，應該可以很輕鬆地整合之，或本身就可以視其為一個可產品化的項目。不僅如此，通過觀察這個日曆控制項內部原理，你還將看到實現一個Ext組件是多麽的複雜。因此，通過本例子的Sample，你將看到整合過程中，需要一點特殊的技巧性在內。不過另一方面，卻也要盡量簡單，去掉實際需求中不需要的內容。為此，我們認為在這次的發布中，針對平衡簡單與複雜之間的取捨可以獲得一個較好的平衡性，以期待您的認同。

認識CalendarPanel

主要的日曆演示程序稱作CalendarPanel，是一個大頭組件，其下面由各個不同的組件所組成。但是你也可以獨立使用其中某些的子控制項（如各種calendar子視圖）。當然CalendarPanel作為大頭控制項是最高層次的容器並替大部分視圖提供所需的配置項參數。所以初初你常會使用到就是這個CalendarPanel。況且她繼承自Panel面版類，所以在她身上可以任意套用一種布局風格。 CalendarPanel的渲染實際是通過不同視圖組件其模板依次輪流渲染的結果，當然，也可以説CalendarPanel是一個容器。下面，我們來看看CalendarPanel分別有哪些的組件組成：

MonthView – 通過MonthViewTemplate模板的視圖，沒有滾動條並總是自適應CalendarPanel大小的。該視圖基於box layout的實現。

DayView – 該試圖下細分了兩個子視圖：DayHeaerView （通過DayHeaderTemplate渲染） 以及 DayBodyView（通過DayBodyTemplate渲染）。頭部視圖（The header view）位於視圖的頂部，是偵聽全天事件的所在；而主題視圖（The body view）則是非事件區域，可被滾動的區域。這是兩種完全不同的視圖類型，有著不同的布局方式和事件處理手段等等的區別，所以必須劃分開來。

WeekView –只是DayView的一天的概念擴展到七天，多次渲染而已。這樣，也不必要刻意創建多個模板了。

雖然CalendarPanel自帶一直默認的編輯形式EventEditorForm，但這仍是遠遠不夠的，你應該根據需求制定新的編輯形式，例如表單驗證規則等的屬性，預計會有什麽事件，都依據每一個項目的不同而不同。故所以，如果開發你的程序時，通常首先第一步的就是制定日曆編輯形式。

CalendarPanel配置項

CalendarPanel類提供許多的配置項參數。通過這些參數，你可以顯示或隱藏默認的視圖，顯示或隱藏默認導航條，顯示或隱藏當前的事件以「今天」代替……。子視圖也有許多配置項如 enableFx, enableDD, startDay等等。由於使用CalendarPanel 的時候你不能直接訪問視圖對象，所以要配置子視圖的話就必須通過 xxViewConfig的配置項（這個xx可替換為「day,」 「week」或「month」）。例如，在例子test-app.js就有針對月視圖的配置項內容：

[javascript] view plaincopy

1. monthViewCfg:{
2. showHeader:true,
3. showWeekLinks:true,
4. showWeekNumbers:true
5. }

控制事件數據

如果熟悉ExtJS組件的數據綁定方式的話，那麼為 CalendarPanel載入數據也不是一件難事。只要創建你想要創建的Ext Store類型，用Ext.calendar.EventRecord 去定義記錄載入之，再將這個Store綁定到eventStore的這個配置項，那麼 CalendarPanel就會完成好數據綁定，自動偵聽Store的事件進而更新或渲染UI，整個過程就是與Ext其他的組件相類似。該控制項也支持自定義的數據映射（mapping）,以便不能直接套用Ext.calendar.EventRecord 的時候。只要指定 Ext.calendar.EventMappings的哪個屬性進行覆蓋即可。例如：

[javascript] view plaincopy

1. Ext.calendar.EventMappings.Title.mapping="my-title";//重新定義過id
2. Ext.calendar.EventMappings.EndDate.name="END";//重新映射欄位
3. Ext.calendar.EventRecord.reconfigure();

整合在一起吧

如果你看過演示程序的代碼，你會發現有兩處地方都是登記事件的，一個在CalendarPanel本身一個是在編輯形式EventEditorForm。其目的在於保持組件的低耦合性（loosely-coupled）以便盡量可復用。不同的項目有不同的需求，作為演示程序就是要迎合這種多變的特性，告訴開發者是如何鏈接這些事件以便完成需求的。不同的日曆視圖會觸發許多特定的事件，如CRUD操作、拖放事件、視圖變動。從原理上講，要更簡單地控制事件，CalendarPanel採用了Relay事件的方法——如此便能更集中地控制好這些事件。 依然是老生常談的話題，UI的交互可能通過事件的設計來產生不同實現，即交互方式決定了事件這麼些，好比頁面頂部的全局信息告示，單擊「快速編輯」顯示出來一個窗體等等。 下面將為大家呈現UI代碼的大體結構，並特意修葺一下，說明怎麼把各種組件組合在一起。可以在示常式序的文件夾下的test-app.js找到完整的代碼。

[javascript] view plaincopy

1. //設置日曆所用的Store數據源
2. this.calendarStore=newExt.data.JsonStore({
3. //輸入配置項
4. });
5. this.eventStore=newExt.data.JsonStore({
6. //輸入配置項
7. });
8. //設置UI
9. newExt.Viewport({
10. layout:"border",
11. items:[{
12. id:"app-header",
13. region:"north",
14. //etc.--staticheaderarea
15. },{
16. id:"app-center",
17. region:"center",
18. layout:"border",
19. items:[{
20. id:"app-west",
21. region:"west",
22. //etc.--sidebarregionconfigs
23. },{
24. //開始定義日曆控制項
25. xtype:"calendarpanel",
26. region:"center",
27. //日曆的數據綁定
28. eventStore:this.eventStore,
29. calendarStore:this.calendarStore,
30. //自定義視圖
31. monthViewCfg:{
32. showWeekLinks:true
33. },
34. //CalendarPanel-specificconfigsas
35. needed
36. showTime:false
37. //Setupeventlisteners--seethe
38. sampleappcodeforthefulllist
39. listeners:{
40. "eventclick":{
41. fn:function(vw,rec,el){
42. //etc.
43. },
44. scope:this
45. },
46. "eventadd":{
47. fn:function(cp,rec){
48. //etc.
49. },
50. scope:this
51. },
52. //etc.--therearealotofthese
53. //Thesehandlersallowtheappcode
54. tocoordinatebetween
55. //componentsandtheoverallUIso
56. thatthecomponents
57. //don"thavetoknowabouteachother.
58. }
59. }]
60. }]
61. });

還有……

文章開頭已經交待，一個日曆控制項真正所蘊含的功能要比演示程序中演示的多得多、豐富得多。例如循環事件（指非編程中的「事件」）、並行日曆、鬧鐘和自定義視圖等等。就作用而言，該示常式序旨在拋磚引玉所用，從中可以讓大家去擴展這個日曆控制項。但是這裡賣一下廣告，如果您正想尋找一個一步到位的整合包，那麼接下來這個高級版的Ext Calendar Pro便是不錯的選擇！

推薦閱讀：