extjs - 如何在Bryntum的Gantt上节省资源分配?

extjs - 如何在Bryntum的Gantt上节省资源分配?,第1张

我的Gantt上有一个资源分配列。 我可以更改作业,但我想知道如何保存它们? 我也可以更改分配默认单位百分比小时。

最佳答案:

1 个答案:

答案 0 :(得分:2)

阅读一下处理数据加载和保存的CrudManager。这个链接有你所需要的一切。

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

<强>简介

本指南介绍如何将CRUD管理器与Ext Gantt一起使用。它仅包含甘特特定细节。有关CRUD管理器实现和体系结构的一般信息,请参阅本指南。

为Ext Gantt实现CRUD管理器的类称为Gnt.data.CrudManager。它使用AJAX作为传输系统,JSON作为编码格式。 使用CRUD管理器的好处

在以前版本的Ext Gantt中,您必须使用标准的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.

出于性能原因,显然我们希望加载过程使用单个请求来返回甘特图中使用的所有商店要使用的数据。由于CM在一个请求中加载数据,因此现在很容易实现。在保存更改时,您通常希望使用“全有或全无”基于事务的方法来持久保存数据库中的更新。如果您使用两个单独的ajax请求,则这是不可行的。 存储

Ext Gantt中使用了许多不同的数据实体:日历,资源,分配,依赖关系和任务。要使用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 = new Gnt.data.CrudManager({     taskStore:taskStore,     商店:[store1,store2,store3],     运输 : {         load:{             url:'php / read.php'         },         同步 : {             url:'php / save.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'
        }
    }
});

在上面的示例数据中,加载操作将自动启动,因为CM配置为autoLoad选项设置为true。还有一种加载方法可以手动调用加载:

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

要自动保留更改,有一个autoSync选项,您当然也可以根据需要手动调用sync方法:

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

可以通过提供crudManager配置将任何Gnt.panel.Gantt实例配置为使用CRUD管理器。在这种情况下,您不需要在Gantt面板上指定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字段下包含其数据。 “天”字段下的对象与包含商店数据的任何其他对象具有完全相同的结构。它包含一系列日历记录(每个代表一个Gnt.model.CalendarDay实例),total定义它们的数量。

需要注意的另一件事是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条回复