天天看點

Ext Gantt Web甘特圖--進階應用

甘特圖所能支援的資料量,以及界面的渲染和操作性能,是衡量一個甘特圖元件是否符合項目需要的重要名額。

為了支援超過萬級超大資料量的甘特圖,Extjs提供一個資料緩沖視圖的解決方案。使用這個方案非常簡單,隻需要在建立甘特圖的時候,加入以下代碼。

1.       var g = new Sch.gantt.GanttPanel({   

2.                      

3.                   view : new Sch.gantt.BufferedGanttView({   

4.                       scrollDelay : false  

5.                   }),   

6.                   taskStore : store,   

7.                   dependencyStore : dependencyStore,   

8.               });   

使用個資料緩沖視圖的Extjs甘特圖能支援10萬條以上的資料量。在我們的測試中,記憶體開銷和性能體驗都非常好。

如果你不想讓你的應用千人一面,那麼Extjs甘特圖提供的“皮膚和主題”功能就非常有必要了。Extjs甘特圖提供三種不同風格的皮膚和樣式,你也可以在美工的配合下自定義自己的皮膚和主題。

自定義主題1

Ext Gantt Web甘特圖--進階應用

自定義主題2

Ext Gantt Web甘特圖--進階應用

自定義主題3

Ext Gantt Web甘特圖--進階應用

以下的代碼展示了通過CSS更改樣式的多種方法。點選工具欄按鈕更改樣式。

2.          ...   

3.       });   

4.       handler : function() {   

5.           g.el.removeClass(['style2', 'style3']).addClass('style1');   

6.           g.view.refresh();   

7.       }  

别忘記調用view.refresh()來重新整理視圖

繼續閱讀