Extjs甘特圖開發指南之高級應用

Extjs甘特圖的大數據量和性能優化

Extjs甘特圖所能支持的數據量，以及界面的渲染和操做性能，是衡量一個甘特圖組件是否符合項目須要的重要指標。

爲了支持超過萬級超大數據量的甘特圖，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

 

自定義主題2

 

自定義主題3

如下的代碼展現了經過CSS更改樣式的多種方法。點擊工具欄按鈕更改樣式。

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

2.          ...   

3.       });   

4.       handler : function() {   

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

6.           g.view.refresh();   

7.       }  

別忘記調用view.refresh()來刷新視圖。