2015-06-11 78 views

回答

2

在處理數據加載和保存的CrudManager上稍微閱讀一下。這個鏈接有你需要的一切。

http://www.bryntum.com/docs/scheduling/3.x/?#!/guide/gantt_crud_manager

介紹

本指南介紹如何使用與分機甘特的CRUD經理。它僅包含甘特特定細節。有關CRUD管理器實施和體系結構的一般信息,請參閱本指南。

Ext Gantt實現CRUD管理器的類叫做Gnt.data.CrudManager。它使用AJAX作爲傳輸系統和JSON作爲編碼格式。 使用CRUD管理器的好處

在以前版本的Ext甘特圖中,必須使用標準的Ext JS數據包加載和保存數據。這將涉及在數據存儲上設置代理並處理加載並保存在每個這樣的存儲上。這種方法的工作,但有一些缺點:

To load data into the Gantt, you had to deal with each store separately. In the worst case, this could mean about 4-5 ajax requests to load the Gantt chart (Tasks, Dependencies, Resources, Assignments, Calendars) depending on which features you used. 
Hard to use database transactions on the server side. 

由於性能原因,obvisously我們希望加載過程使用返回的數據由甘特圖中使用的所有門店消費的單個請求。由於CM在一個請求中加載數據,現在很容易實現。談到保存更改時,通常希望採用「全有或全無」基於事務的方法來將更新保存在數據庫中。如果你使用兩個單獨的Ajax請求,這是不可行的。 商店

有許多在內線甘特使用不同的數據實體:日曆,資源分配,依賴和任務。要使用Gnt.data.CrudManager實例註冊它們,應該分別使用以下配置:calendarManager,resourceStore,assignmentStore,dependencyStore,taskStore。

這裏有一個基本的配置是什麼樣子:

var crudManager = new Gnt.data.CrudManager({ 
    autoLoad  : true, 
    calendarManager : calendarManager, 
    resourceStore : resourceStore, 
    dependencyStore : dependencyStore, 
    assignmentStore : assignmentStore 
    taskStore  : taskStore, 
    transport  : { 
     load : { 
      url  : 'php/read.php' 
     }, 
     sync : { 
      url  : 'php/save.php' 
     } 
    } 
}); 

後端,在這種情況下,「read.php」應該返回一個JSON一個類似如下所示:

{ 
    "success"  : true, 

    "dependencies" : { 
     "rows" : [ 
      {"Id" : 1, "From" : 11, "To" : 17, "Type" : 2, "Lag" : 0, "Cls" : "", "LagUnit" : "d"}, 
      {"Id" : 2, "From" : 12, "To" : 17, "Type" : 2, "Lag" : 0, "Cls" : "", "LagUnit" : "d"}, 
      {"Id" : 3, "From" : 13, "To" : 17, "Type" : 2, "Lag" : 0, "Cls" : "", "LagUnit" : "d"} 
     ] 
    }, 

    "assignments" : { 
     "rows" : [ 
      { 
       "Id"   : 1, 
       "TaskId"  : 11, 
       "ResourceId" : 1, 
       "Units"  : 100 
      }, 
      { 
       "Id"   : 2, 
       "TaskId"  : 11, 
       "ResourceId" : 2, 
       "Units"  : 80 
      } 
     ] 
    }, 

    "resources" : { 
     "rows" : [ 
      {"Id" : 1, "Name" : "Mats" }, 
      {"Id" : 2, "Name" : "Nickolay" }, 
      {"Id" : 3, "Name" : "Goran" } 
     ] 
    }, 

    "tasks" : { 
     "rows" : [ 
      { 
       "BaselineEndDate" : "2010-01-28", 
       "Id"    : 11, 
       "leaf"    : true, 
       "Name"    : "Investigate", 
       "PercentDone"  : 50, 
       "TaskType"   : "LowPrio", 
       "StartDate"   : "2010-01-18", 
       "BaselineStartDate" : "2010-01-20", 
       "Segments"   : [ 
        { 
         "Id"    : 1, 
         "StartDate"   : "2010-01-18", 
         "Duration"   : 1 
        }, 
        { 
         "Id"    : 2, 
         "StartDate"   : "2010-01-20", 
         "Duration"   : 2 
        }, 
        { 
         "Id"    : 3, 
         "StartDate"   : "2010-01-25", 
         "Duration"   : 5 
        } 
       ] 
      }, 
      { 
       "BaselineEndDate" : "2010-02-01", 
       "Id"    : 12, 
       "leaf"    : true, 
       "Name"    : "Assign resources", 
       "PercentDone"  : 50, 
       "StartDate"   : "2010-01-18", 
       "BaselineStartDate" : "2010-01-25", 
       "Duration"   : 10 
      }, 
      { 
       "BaselineEndDate" : "2010-02-01", 
       "Id"    : 13, 
       "leaf"    : true, 
       "Name"    : "Gather documents (not resizable)", 
       "Resizable"   : false, 
       "PercentDone"  : 50, 
       "StartDate"   : "2010-01-18", 
       "BaselineStartDate" : "2010-01-25", 
       "Duration"   : 10 
      }, 
      { 
       "BaselineEndDate" : "2010-02-04", 
       "Id"    : 17, 
       "leaf"    : true, 
       "Name"    : "Report to management", 
       "PercentDone"  : 0, 
       "StartDate"   : "2010-01-30", 
       "BaselineStartDate" : "2010-01-29", 
       "Duration"   : 0 
      } 
     ] 
    } 
} 

如果已經爲任務存儲實例指定了日曆,則不應指定calendarManager,resourceStore,dependencyStore和assignmentStore配置。在這種情況下,CRUD經理只是把他們所提供的任務存儲實例:

var taskStore = new Gnt.data.TaskStore({ 
    calendarManager : calendarManager, 
    resourceStore : resourceStore, 
    dependencyStore : dependencyStore, 
    assignmentStore : assignmentStore 
}); 

var crudManager = new Gnt.data.CrudManager({ 
    // Specifying TaskStore only 
    taskStore  : taskStore, 
    transport  : { 
     load : { 
      url  : 'php/read.php' 
     }, 
     sync : { 
      url  : 'php/save.php' 
     } 
    } 
}); 

可以提供任何數量的使用存儲配置額外的存儲:

VAR crudManager =新Gnt.data。 CrudManager({ taskStore:taskStore, 存儲:[商店1,商店,store3], 運輸:{ 負載:{ URL: '的PHP/read.php' }, 同步:{ URL:「的PHP /保存。php' } } });

或以編程方式使用addStore方法添加它們:

crudManager.addStore([ store2, store3 ]); 

實施

下面是一個CRUD經理如何創建:

var crudManager = new Gnt.data.CrudManager({ 
    autoLoad  : true, 
    taskStore  : taskStore, 
    transport  : { 
     load : { 
      url  : 'php/read.php' 
     }, 
     sync : { 
      url  : 'php/save.php' 
     } 
    } 
}); 

在上面的例子中的數據時,由於配置了autoLoad選項設置爲true的CM,加載操作將自動啓動。還有一個load方法來調用手動加載:

crudManager.load(function (response) { 
    alert('Data loaded...'); 
}) 

要自動持續變化,有一個自動同步選項,你可以根據需要,當然也可手動調用同步方法:

crudManager.sync(function (response) { 
    alert('Changes saved...'); 
}); 

任何Gnt.panel.Gantt實例都可以通過提供crudManager配置來配置爲使用CRUD管理器。在這種情況下,您不需要在甘特圖面板上指定taskStore,dependencyStore,resourceStore,assignmentStore。它們將從提供的crudManager實例中獲取。

new Gnt.panel.Gantt({ 
    viewPreset   : 'dayAndWeek', 
    startDate   : new Date(2014, 0, 1), 
    endDate    : new Date(2014, 1, 1), 
    width    : 800, 
    height    : 350, 
    // point grid to use CRUD manager 
    crudManager   : crudManager 
    columns    : [ 
     { 
      xtype : 'namecolumn' 
     }, 
     { 
      xtype : 'startdatecolumn' 
     } 
    ] 
}); 

日曆

Gnt.data.CrudManager支持在項目中的所有項目日曆的批量加載。爲了做到這一點,必須指定Gnt.data.CrudManager.calendarManager配置,或者可以在任務存儲中指定它。

var calendarManager = Ext.create('Gnt.data.CalendarManager', { 
    calendarClass : 'Gnt.data.calendar.BusinessTime' 
}); 

... 

var taskStore  = Ext.create('Gnt.data.TakStore', { 
    // taskStore calendar will automatically be set when calendarManager gets loaded 
    calendarManager : calendarManager, 
    resourceStore : resourceStore, 
    dependencyStore : dependencyStore, 
    assignmentStore : assignmentStore 
}); 

var crudManager = Ext.create('Gnt.data.CrudManager', { 
    autoLoad  : true, 
    taskStore  : taskStore, 
    transport  : { 
     load : { 
      url  : 'php/read.php' 
     }, 
     sync : { 
      url  : 'php/save.php' 
     } 
    } 
}); 

負載響應結構

日曆管理器負載響應具有比所描述的一般的多一點複雜的結構。

與標準響應的第一個區別在於,對於每個日曆,我們都將其數據包含在Days字段下。 Days字段下的對象與包含存儲數據的任何其他對象具有完全相同的結構。它具有包含日曆記錄數組的行(每個表示一個Gnt.model.CalendarDay實例),總數定義它們的數量。

另一件需要注意的事情是如何將metaData用於日曆管理器加載。它有一個projectCalendar屬性,它必須包含應該用作項目日曆的日曆的標識符。

{ 
    requestId : 123890, 
    revision : 123, 
    success  : true, 

    calendars : { 
     // each record represents a Gnt.model.Calendar instance 
     rows  : [ 
      { 
       Id     : "1", 
       parentId   : null, 
       Name    : "General", 
       DaysPerMonth  : 20, 
       DefaultAvailability : ["08:00-12:00","13:00-17:00"], 
       ... 
       // the calendar data 
       Days    : { 
        // each record represents Gnt.model.CalendarDay instance 
        rows : [{ 
         Id     : 2, 
         calendarId   : "1", 
         Name    : "Some big holiday", 
         Type    : "DAY", 
         Date    : "2010-01-14", 
         Availability  : [], 
         Weekday    : 0, 
         OverrideStartDate : null, 
         OverrideEndDate  : null, 
         IsWorkingDay  : false, 
         Cls     : "gnt-national-holiday" 
        }], 
        total : 1 
       }, 
       // child calendars go here 
       // each record represents a Gnt.model.Calendar instance 
       children : [{ 
        Id   : "2", 
        parentId : "1", 
        Name  : "Holidays", 
        ... 
        // "Holidays" calendar data 
        Days  : { 
         // each record represents Gnt.model.CalendarDay instance 
         rows : [ 
          { 
           Id   : 3, 
           calendarId : "2", 
           Name  : "Mats's birthday", 
           Date  : "2010-01-13", 
           ... 
          }, 
          { 
           Id   : 4 
           calendarId : "2", 
           Name  : "Bryntum company holiday", 
           Date  : "2010-02-01", 
           ... 
          }, 
          { 
           Id   : 5, 
           calendarId : "2", 
           Name  : "Bryntum 1st birthday", 
           Date  : "2010-12-01", 
           ... 
          } 
         ], 
         total : 3 
        }, 
        leaf : true 
       }] 
      } 
     ], 
     total  : 2, 
     metaData : { 
      // this specifies the identifier of the project calendar 
      projectCalendar : "1" 
     } 

    }, 

    store2  : { 
     ... 
    }, 

    store3  : { 
     ... 
    } 
} 
+0

好地墊!但想知道是否可以將資源分配默認單位的百分比更改爲小時 –