PDA

View Full Version : not able to use bryntum advanced gantt with the resource assignment



rushi2440
10 Apr 2012, 11:49 PM
Hi..

sencha forum member I am having problem with using the bryntum resource assignment example with the advanced gantt chartt.

so far I had achieved to develop the advanced gantt chart of the bryntum example listed with below link
http://www.bryntum.com/examples/gantt-latest/examples/advanced/advanced.html
(http://www.bryntum.com/examples/gantt-latest/examples/advanced/advanced.html)
now I want another column of the resources to be added to my advanced gantt panel. for reference I am using the below link for assigning the new resource to the tasks
http://www.bryntum.com/examples/gantt-latest/examples/assigningresources/resources.html

I am having window like the below image screenshot shown.
33847

In this window I am having button Add new Root Node, After that click event new Root is added correctly and my taskStore get Sync correctly with values of TaskId, TaskName, StartDate, EndDate, Duration, PercentDone, Priority etc. My database successfully saved all the values to my database.

Now I want to add the resource to the newly created task. I click on the AssignedResource column and I am able to get all the resource available, Now after clicking the resource named Yogendra and clicking the Save and Close button my assignmentStore get Sync. with values like TaskId, Id, ResourceId, Units. All this values passed to server correctly and I am able to save all the values to my database.

I am having one-to-one relationship with Task and Assignment tables and one-to-many relationship with Assignment and Resource.

All the values persisted correctly but still I am not able to view the resource assigned to the Task's.

I am having window which contains the resourcePanel my window code is below

Ext.define('rms.view.projectmgt.taskAdd' ,{
extend: 'Ext.Window',
alias : 'widget.taskaddwindow',
id: 'taskaddwindow',
title: 'Task Management Window',
width: '85%',
height: '85%',
closeAction: 'destroy',
closable : true,
modal: true,
constrain: true,
maximizable: true,
stateful: false,
projectid: null, // this will be set before showing window
layout: 'border',
initComponent: function() {
this.layoutConfig = {
align: 'stretch'
};
this.items = [
{
region: 'center',
xtype: 'taskpanel',
width: '85%',
height: '85%'
}
];
this.on({
scope: this,
beforeshow: this.onBeforeShow
});
this.callParent(arguments);
},
onBeforeShow: function() {
var projectid = this.projectid;
if(projectid != null) {
// consider projectid = 1 for example

var store = Ext.data.StoreManager.lookup('task');
console.log('BEFOR SHOW ::'+projectid);
store.read({
params: {'projectid': projectid},
callback: function(options, success, response) {
console.log('RESPONSE FROM SERVER :'+response.responseText);
} //callback
});

var assignmentStore = Ext.data.StoreManager.lookup('assignment');
assignmentStore.load();

var resourceStore = Ext.data.StoreManager.lookup('resource');
resourceStore.load();

}
}
});


I am loading the taskStore , assignmentStore , resourceStore etc in this window beforeShow event and this window contains my bryntum gantt panel with resource having below code

Ext.define('CustomAssignmentCellEditor', {
extend : "Gnt.widget.AssignmentCellEditor",

show: function(){
console.log('SHOW ', this.resourceStore.getCount());


this.callParent(arguments);
}
});


var start = new Date(2012, 0, 1),
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);


var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'Id',
'displayText'
],
data: [[0, 'Low'], [1, 'Normal'], [2, 'High']]
}),
triggerAction: 'all',
mode: 'local',
valueField: 'Id',
displayField: 'displayText'
});

TaskPriority = {
Low : 0,
Normal : 1,
High : 2
};

var printableMilestoneTpl = new Gnt.template.Milestone({
prefix : 'foo',
printable : true,
imgSrc : 'resources/images/milestone.png'
});


var params = new Object();
Ext.define('rms.view.projectmgt.taskPanel', {
extend: "Gnt.panel.Gantt",
id: 'taskpanel',
alias: 'widget.taskpanel',
requires: [
'Gnt.plugin.TaskContextMenu',
'Gnt.column.StartDate',
'Gnt.column.EndDate',
'Gnt.column.Duration',
'Gnt.column.PercentDone',
'Gnt.column.ResourceAssignment',
'Sch.plugin.TreeCellEditing',
'Sch.plugin.Pan'
],
leftLabelField: 'Name',
loadMask: true,
startDate: start,
endDate: end,
multiSelect: true,
cascadeChanges: true,
viewPreset: 'weekAndDayLetter',
recalculateParents: false,
showTodayLine : true,
showBaseline : true,


initComponent: function() {
var me = this;
me.on({
scope: me,
beforeload: function(store,records,options) {
if(records.params['projectid'] != null)
{
return true;
}
else
{
return false;
}
}
});

var assignmentStore = Ext.data.StoreManager.lookup('assignment');
var resourceStore = Ext.data.StoreManager.lookup('resource');
var taskStore = Ext.data.StoreManager.lookup('task');
var dependencyStore = Ext.data.StoreManager.lookup('dependency');

var assignmentEditor = Ext.create('Gnt.widget.AssignmentCellEditor', {
assignmentStore : assignmentStore,
resourceStore : resourceStore
});

Ext.apply(me, {
resourceStore : resourceStore,
assignmentStore : assignmentStore,

taskStore: taskStore,
dependencyStore: dependencyStore,

stripeRows : true,

// Add some extra functionality
plugins : [
Ext.create("Gnt.plugin.TaskContextMenu"),
Ext.create('Sch.plugin.TreeCellEditing', {
clicksToEdit: 1
}),
Ext.create('Gnt.plugin.Printable', {
printRenderer : function(task, tplData) {
if (task.isMilestone()) {
return;
} else if (task.isLeaf()) {
var availableWidth = tplData.width - 4,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);

return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #7971E2;border-right:{1}px solid #E5ECF5;', progressWidth, availableWidth - progressWidth, availableWidth)
};
} else {
var availableWidth = tplData.width - 2,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);

return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #FFF3A5;border-right:{1}px solid #FFBC00;', progressWidth, availableWidth - progressWidth, availableWidth)
};
}
},
beforePrint : function(sched) {
var v = sched.getSchedulingView();
this.oldRenderer = v.eventRenderer;
this.oldMilestoneTemplate = v.milestoneTemplate;
v.milestoneTemplate = printableMilestoneTpl;
v.eventRenderer = this.printRenderer;
},


afterPrint : function(sched) {
var v = sched.getSchedulingView();
v.eventRenderer = this.oldRenderer;
v.milestoneTemplate = this.oldMilestoneTemplate;
}
})
],
eventRenderer: function (task) {
var prioCls;
switch (task.get('Priority')) {
case TaskPriority.Low:
prioCls = 'sch-gantt-prio-low';
break;


case TaskPriority.Normal:
prioCls = 'sch-gantt-prio-normal';
break;


case TaskPriority.High:
prioCls = 'sch-gantt-prio-high';
break;
}


return {
cls: prioCls
};

if (assignmentStore.findExact('TaskId', task.data.Id) >= 0) {
// This task has resources assigned, show a little icon
return {
ctcls : 'resources-assigned'
};
}
},


// Setup your static columns
columns: [
{
xtype : 'treecolumn',
header: 'Tasks',
dataIndex: 'Name',
width: 150,
field: new Ext.form.TextField()
},
new Gnt.column.StartDate(),
new Gnt.column.Duration(),
new Gnt.column.PercentDone(),
{
header: 'Priority',
width: 50,
dataIndex: 'Priority',
renderer: function (v, m, r) {
switch (v) {
case TaskPriority.Low:
return 'Low';


case TaskPriority.Normal:
return 'Normal';


case TaskPriority.High:
return 'High';
}
},
field: combo
},
{
xtype : 'booleancolumn',
width : 50,

header : 'Manual',

dataIndex : 'ManuallyScheduled',

field : {
xtype : 'combo',
store : [ 'true', 'false' ]
}
},{
header : 'Assigned Resources',
width:150,
editor : assignmentEditor,
xtype : 'resourceassigmentcolumn'
}
],
tooltipTpl: new Ext.XTemplate(
'<h4 class="tipHeader">{Name}</h4>',
'<table class="taskTip">',
'<tr><td>Start:</td> <td align="right">{[Ext.Date.format(values.StartDate, "y-m-d")]}</td></tr>',
'<tr><td>End:</td> <td align="right">{[Ext.Date.format(Ext.Date.add(values.EndDate, Ext.Date.MILLI, -1), "y-m-d")]}</td></tr>',
'<tr><td>Progress:</td><td align="right">{PercentDone}%</td></tr>',
'</table>'
).compile(),


tbar: [{
xtype: 'buttongroup',
title: 'CRUD OPERATION',
columns: 2,
defaults: {
scale: 'small'
},
items: [{
text: 'Save',
iconCls: 'icon-save',
handler: function () {
taskStore.sync();
}
},
{
text: 'Add new Root Node',
iconCls: 'icon-new',
handler: function () {
taskStore.getRootNode().appendChild(new taskStore.model({
Name: 'New Task',
PercentDone: 60,
StartDate : new Date(2012, 0, 30),
Duration: 1.0,
DurationUnit: 'd',
leaf: true,

})
);
taskStore.sync();
}
},{
text : 'Reload Task',
iconCls : 'icon-reload',
scope : this,
handler : function() {
Ext.data.StoreManager.lookup('task').load();
}
}
}]
}]

});

me.callParent(arguments);


}
});


my TaskStore code is

Ext.define('rms.store.task', {
extend: 'Gnt.data.TaskStore',
model: 'rms.model.taskModel',
storeId: 'taskStore',
autoLoad : true,
autoSync : true,
proxy : {
type : 'ajax',
api: {
read: 'task/GetTask.action',
create: 'task/CreateTask.action',
destroy: 'task/DeleteTask.action',
update: 'task/UpdateTask.action'
},
writer : new Ext.data.JsonWriter({
root : 'taskdata',
encode : true,
writeAllFields : true
}),
reader : new Ext.data.JsonReader({
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
type : 'json',
root: function (o) {
if (o.taskdata) {
return o.taskdata;
} else {
return o.children;
}
}
})
}
});


my taskModel code is

Ext.define('rms.model.taskModel', {
extend : "Gnt.model.Task",
fields : [
{ name : 'Id', type : 'int', useNull : true, mapping : 'id' },
{ name : 'StartDate', type : 'date', mapping : 'startdate', dateFormat : 'time' },
{ name : 'EndDate', type : 'date', mapping : 'enddate', dateFormat : 'time' },
{ name : 'Priority', defaultValue : 1, mapping : 'priority' },
{ name : 'Duration', mapping : 'duration' },
{ name : 'PercentDone', mapping : 'percentdone' },
{ name : 'DurationUnit', mapping : 'durationunit' },
{ name : 'parentId', mapping : 'parentid' },
{ name : 'Name', mapping : 'taskname' },
{ name : 'index', mapping : 'taskindex' },
{ name : 'depth', mapping : 'depth'}
],

associations: [{
model: 'rms.model.assignmentModel',
type: 'hasMany',
primaryKey: 'Id',
foreignKey: 'TaskId',
associationKey: 'assignments' // read child data from assignments
}]
});


my AssignmentStore code is

Ext.define('rms.store.assignment', {
extend: 'Ext.data.Store',
model: 'rms.model.assignmentModel',
storeId: 'assignmentStore',
autoLoad: false,
autoSync: true,
constructor: function() {
var me = this;
me.callParent(arguments);
this.resourceStore = Ext.create('rms.store.resource');
},

resourceStore: this.resourceStore,

proxy: {
type : 'ajax',
method: 'GET',
reader: new Ext.data.JsonReader({
root: 'assignmentdata',
type : 'json'
}),
writer : new Ext.data.JsonWriter({
root: 'assignmentdata',
type : 'json',
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
encode : true,
writeAllFields : true
}),
api: {
read : 'assignment/GetAssignment.action',
create: 'assignment/CreateAssignment.action',
update: 'assignment/UpdateAssignment.action',
destroy: 'assignment/DeleteAssignment.action'
}
}
});


and my assignmentModel code is

Ext.define('rms.model.assignmentModel', {
extend: 'Gnt.model.Assignment',
belongsTo: 'rms.model.taskModel',
idProperty: 'Id',
fields: [
{ name : 'Id', type : 'int', useNull : true, mapping : 'id' },
{ name : 'ResourceId', type : 'int', mapping : 'resource.id' },
{ name : 'TaskId', type : 'int', mapping : 'task.id' },
{ name : 'Units', type: 'int', mapping: 'units'}
]
});


and finally my ResourceStore code is

Ext.define('rms.store.resource', {
extend: 'Ext.data.Store',
model: 'rms.model.resourceModel',
storeId: 'resourceStore',
autoLoad: false,
autoSync: true,

proxy: {
type : 'ajax',
method: 'GET',
reader: new Ext.data.JsonReader({
root: 'resourcedata',
type : 'json'
}),
writer : new Ext.data.JsonWriter({
root: 'resourcedata',
type : 'json',
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
encode : true,
writeAllFields : true
}),
api: {
read : 'resource/GetResource.action',
create: 'resource/CreateResource.action',
update: 'resource/UpdateResource.action',
destroy: 'resource/DeleteResource.action'
}
}
});


and my resourceModel code is

Ext.define('rms.model.resourceModel',{
extend: 'Gnt.model.Resource',


fields : [
{ name : 'Id', type : 'int', useNull : true, mapping : 'id' },
{ name : 'Name', mapping : 'name' }
]
});


and my json response values are as follows
response for

task/GetTask.action is
{
"total": 1,
"success": true,
"taskdata": [{
"children": null,
"leaf": true,
"expanded": false,
"duration": 1.0,
"project": {
"company": {
"cmpname": "Kintu Designs Pvt ltd.",
"cmptitle": "Kintu Designs Pvt ltd.",
"cmpdesc": "<b>?yaryan997@gmail.com</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintu.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1017990688000,
"cmpmodifiedon": 1017990688000,
"cmpmodifiedby": 0,
"id": 1
},
"projectname": "Project 1",
"projecttitle": "Project 1",
"projectdesc": "<b>Project 1</b>",
"projectstart": 1017945000000,
"projectend": 1019845800000,
"createdby": 1,
"createdon": 1017992882000,
"modifiedon": 1017992882000,
"modifiedby": 1,
"id": 1
},
"startdate": 1327861800000,
"enddate": 1327948200000,
"createdby": null,
"createdon": null,
"modifiedon": null,
"modifiedby": null,
"durationunit": "d",
"parentid": null,
"percentdone": 60,
"taskindex": 0,
"taskname": "New Task",
"id": 1,
"priority": 1,
"depth": 1
}]
}


assignment/GetAssignment.action response is

{
"total": 1,
"success": true,
"assignmentdata": [{
"task": {
"duration": 1.0,
"project": {
"company": {
"cmpname": "Kintu Designs Pvt ltd.",
"cmptitle": "Kintu Designs Pvt ltd.",
"cmpdesc": "<b>?yaryan997@gmail.com</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintu.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1017990688000,
"cmpmodifiedon": 1017990688000,
"cmpmodifiedby": 0,
"id": 1
},
"projectname": "Project 1",
"projecttitle": "Project 1",
"projectdesc": "<b>Project 1</b>",
"projectstart": 1017945000000,
"projectend": 1019845800000,
"createdby": 1,
"createdon": 1017992882000,
"modifiedon": 1017992882000,
"modifiedby": 1,
"id": 1
},
"startdate": 1327861800000,
"enddate": 1327948200000,
"createdby": null,
"createdon": null,
"modifiedon": null,
"modifiedby": null,
"durationunit": "d",
"parentid": null,
"percentdone": 60,
"taskindex": 0,
"taskname": "New Task",
"id": 1,
"priority": 1,
"depth": 1
},
"units": 100.0,
"resource": [{
"employee": {
"username": "yaryan997",
"surname": "Singh",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd.",
"cmptitle": "Kintu Designs Pvt ltd.",
"cmpdesc": "<b>?yaryan997@gmail.com</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintu.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1017990688000,
"cmpmodifiedon": 1017990688000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"departdescr": "<b>?Programmer</b>",
"createdby": 1,
"createdon": 1017991560000,
"modifiedon": 1017991560000,
"modifiedby": 1,
"id": 1
},
"designame": "JAVA Programmer",
"desigdescr": "<b>?JAVA Programmer</b>",
"createdby": 1,
"createdon": 1017991595000,
"modifiedon": 1017991595000,
"modifiedby": 1,
"id": 1
},
"firstname": "Yogendra",
"createdby": 1,
"createdon": 1017991741000,
"modifiedon": 1017991741000,
"modifiedby": 1,
"gender": "M",
"marital": "U",
"nationality": "Indian",
"dateofbirth": 1017991741000,
"joindate": 1017991741000,
"contactno": "8128812153",
"mobileno": "8128812153",
"email": "yaryan997@gmail.com",
"otheremail": "yaryan997@gmail.com",
"fathername": "K D Singh",
"mothername": "Devi Singh",
"accountno": "523223878",
"salary": "5000",
"address": "D-204 Diamond Plaza Hathuran Road Kosamba",
"id": 1,
"password": "123456789"
},
"name": "Yogendra",
"id": 1
}],
"id": 1
}]
}


resource/GetResource.action response is

{
"total": 1,
"success": true,
"resourcedata": [{
"employee": {
"username": "yaryan997",
"surname": "Singh",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd.",
"cmptitle": "Kintu Designs Pvt ltd.",
"cmpdesc": "<b>?yaryan997@gmail.com</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintu.com",
"cmpemail1": "yaryan997@gmail.com",
"cmpemail2": "yaryan997@gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "yaryan997@gmail.com",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1017990688000,
"cmpmodifiedon": 1017990688000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"departdescr": "<b>?Programmer</b>",
"createdby": 1,
"createdon": 1017991560000,
"modifiedon": 1017991560000,
"modifiedby": 1,
"id": 1
},
"designame": "JAVA Programmer",
"desigdescr": "<b>?JAVA Programmer</b>",
"createdby": 1,
"createdon": 1017991595000,
"modifiedon": 1017991595000,
"modifiedby": 1,
"id": 1
},
"firstname": "Yogendra",
"createdby": 1,
"createdon": 1017991741000,
"modifiedon": 1017991741000,
"modifiedby": 1,
"gender": "M",
"marital": "U",
"nationality": "Indian",
"dateofbirth": 1017991741000,
"joindate": 1017991741000,
"contactno": "8128812153",
"mobileno": "8128812153",
"email": "yaryan997@gmail.com",
"otheremail": "yaryan997@gmail.com",
"fathername": "K D Singh",
"mothername": "Devi Singh",
"accountno": "523223878",
"salary": "5000",
"address": "D-204 Diamond Plaza Hathuran Road Kosamba",
"id": 1,
"password": "123456789"
},
"name": "Yogendra",
"id": 1
}]
}


I had provided everything I had done to add the resourcel panel column to bryntum advanced ganttChart but still my advanced gantt chart is not showing the resources assigned to it.

please see the code I had posted and suggest me what wrong I had done with the code, which make resource name not available in bryntum advance gantt resource chart.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

scottmartin
11 Apr 2012, 9:14 AM
Have you contacted Bryntum to see what they have to say?
I do not have their library available to test your application.

Regards,
Scott.

rushi2440
11 Apr 2012, 9:56 PM
@scottmartin

I am using the trial version of there examples and trying to combine two different examples into one.

You can get the trial version downloadable from the below link.
http://bryntum.com/Bryntum-2.0-45d-trial.zip
(http://bryntum.com/Bryntum-2.0-45d-trial.zip)
and rest of the code I had provide you. Please suggest me what's wrong I am doing here.


Yogendra Singh
Sr. Programmer
Kintudesigns.com

scottmartin
12 Apr 2012, 4:18 AM
Before we go digging into a library create by another vendor, have you tried to contact Bryntum?
What was there response?

Regards,
Scott.