Extjs 甘特圖教程之自定義任務樹

Extjs 甘特圖自定義任務樹

       Extjs 甘特圖GanttPanel中默認的設置很難知足客戶多變需求，咱們就針對一些經常使用的擴展作一個說明。 

      通常最經常使用的需求是，自定義多列，自定義行，自定義單元格等等。下面咱們就分別來講明。

Extjs 甘特圖自定義列

Extjs 甘特圖GanttPanel的列配置對象，描述了表頭、單元格、編輯器等重要配置。通常來講， 咱們提供一個列配置對象，顯示了「序號」、「任務名稱」、「開始日期」、「完成日期」、「進度」等比較典型的列。 可是有時咱們會顯示更多的任務屬性，例如，任務的部門，負責人，地點等等。

Extjs 甘特圖自定義列很是簡單，只要在配置GanttPanel的列配置對象中多添加一個單元既可。見如下Extjs 甘特圖例子

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

2.                   // Setup your static columns   

3.                   columns : [   

4.                       {   

5.                           header : 'Tasks',    

6.                           sortable:true,    

7.                           dataIndex : 'Name',    

8.                           locked : true,   

9.                           width:250,    

10.                       editor : new Ext.form.TextField()   

11.                   },{   

12.                       header : '更多列1',    

13.                       sortable:true,    

14.                       width:50,    

15.                       dataIndex : 'Other1',    

16.                       locked : true  

17.                   }   

18.               ],   

19.     

20.               taskStore : taskStore,   

21.               dependencyStore : dependencyStore   

22.   });  

Extjs 甘特圖運行後的軟件截圖以下