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
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