I have added new task button in ASP.net MVC demo, where as I am not able to facilitate same functionality in ASP.net CRUD demo example.
App.js
var jobid = getParameterByName('jobid');
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
Ext.Loader.setConfig({ enabled: true, disableCaching: true });
Ext.Loader.setPath('App', '../Style Library/js');
Ext.require([
'App.view.GanttPanel'
]);
Ext.onReady(function () {
App.init();
Ext.QuickTips.init();
});
TaskPriority = {
Low: 0,
Normal: 1,
High: 2
};
App = {
// Initialize application
init: function () {
var dependencyStore = Ext.create("App.store.Dependency");
var resourceStore = Ext.create("Gnt.data.ResourceStore");
var assignmentStore = Ext.create("Gnt.data.AssignmentStore", {
extend: 'Gnt.data.AssignmentStore',
autoLoad: true,
autoSync: true,
resourceStore: resourceStore,
proxy: {
method: 'GET',
type: 'ajax',
headers: { "Content-Type": 'application/json' },
api: {
read: '../webservices/Assignments.asmx/Get',
create: '../webservices/Assignments.asmx/Create',
destroy: '../webservices/Assignments.asmx/Delete'
},
reader: {
type: 'json',
root: 'd.assignmentdata'
},
writer: {
root: 'jsonData',
type: 'json',
encode: false,
allowSingle: false
}
},
listeners: {
load: function () {
this.resourceStore.loadData(this.proxy.reader.jsonData.d.resources);
}
}
});
var start = new Date(2010, 1, 1),
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 10);
var taskStore = Ext.create("App.store.Task");
var g = Ext.create("App.view.GanttPanel", {
height: 500,
width: 1000,
renderTo: 'GanttDiv',
startDate: start,
endDate: end,
taskStore: taskStore,
assignmentStore: assignmentStore,
dependencyStore: dependencyStore,
resourceStore: resourceStore
});
}
};
Ext.define("App.model.Task", {
extend: "Gnt.model.Task",
// Some custom field definitions
fields: [
{ name: 'Id', type: 'int', useNull: true },
{ name: 'StartDate', type: 'date', dateFormat: 'MS' },
{ name: 'EndDate', type: 'date', dateFormat: 'MS' },
{ name: 'Priority', defaultValue: 1 },
{ name: 'notes', type: 'string', defaultValue: '' },
// NodeInterface overrides
{ name: 'parentId', type: 'int', useNull: true, persist: true },
{ name: 'index', type: 'int', persist: true },
{ name:'jobid', type: 'string' ,defaultValue: jobid}
]
});
Ext.define("App.store.Task", {
extend: 'Gnt.data.TaskStore',
model: 'App.model.Task',
autoSync: true,
proxy: {
type: 'ajax',
headers: { "Content-Type": 'application/json' },
api: {
read: '../webservices/Tasks.asmx/Get',
create: '../webservices/Tasks.asmx/Create',
destroy: '../webservices/Tasks.asmx/Delete',
update: '../webservices/Tasks.asmx/Update'
},
writer: {
type: 'json',
root: 'jsonData',
encode: false,
allowSingle: false
},
reader : {
type : 'json',
root: function (o) {
if (o.d) {
return o.d;
} else {
return o.children;
}
}
},[code]'jobid': jobid
}
},
listeners: {
beforesync: function () {
}
}
});
[/code]
GanttView.js
Ext.define("App.view.GanttPanel", {
extend: "Gnt.panel.Gantt",
requires: [
'App.model.Dependency',
'App.model.Task',
'App.store.Task',
'App.store.Dependency',
'App.store.Assignment'
],
leftLabelField: 'Name',
loadMask: true,
multiSelect: true,
cascadeChanges: true,
viewPreset: 'weekAndDayLetter',
initComponent: function () {
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'
});
var assignmentEditor = Ext.create('Gnt.widget.AssignmentCellEditor', {
assignmentStore: this.assignmentStore,
resourceStore: this.resourceStore,
fieldConfig: {
gridConfig: {
listeners: {
afterrender: function (grid) {
var header = grid.headerCt;
header.items.last().hide(); // Hide unit column
grid.getSelectionModel().setSelectionMode('SINGLE');
}
}
}
}
});
Ext.define('MyApp.TaskContextMenu', {
extend: 'Gnt.plugin.TaskContextMenu',
deleteTask: function () {
var me = this;
Ext.Msg.show({
title: 'Delete task?',
msg: 'Are you sure you want to delete selected tasks ?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function (button) {
if (button === 'yes') {
var tasks = me.grid.getSelectionModel().selected;
me.grid.taskStore.remove(tasks.items);
}
}
});
}
});
var g = this;
Ext.apply(this, {
// Add some extra functionality
plugins: [
Ext.create("MyApp.TaskContextMenu", {
triggerEvent: 'itemcontextmenu'
}),
Ext.create('Sch.plugin.TreeCellEditing', {
clicksToEdit: 1,
listeners: {
edit: function () {
g.assignmentStore.sync();
}
}
})
],
layout: 'border',
lockedGridConfig: {
width: 250,
split: true,
region: 'west'
},
schedulerConfig: {
region: 'center'
},
lockedViewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
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(values.EndDate, "y-m-d")]}</td></tr>',
'<tr><td>Progress:</td><td align="right">{PercentDone}%</td></tr>',
'</table>'
).compile(),
// Setup your static columns
columns: [
{ header: 'Id', dataIndex: 'Id', width: 40 },
new Gnt.column.WBS(),
{
xtype: 'treecolumn',
header: 'Tasks',
dataIndex: 'Name',
width: 150,
field: new Ext.form.TextField()
},
{
header: 'Assigned Resources',
width: 150,
showUnits: false,
editor: assignmentEditor,
xtype: 'resourceassignmentcolumn'
},
new Gnt.column.StartDate(),
new Gnt.column.Duration(),
new Gnt.column.EndDate(),
{
header: 'Notes',
width: 400,
bodyPadding: 10,
dataIndex: 'notes',
field: {
xtype: 'textareafield',
grow: true
}
///field: new Ext.form.TextArea()
},
// 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']
}
}
],
tbar: [
{
text: 'Indent',
handler: function () {
g.taskStore.indent(g.getSelectionModel().getSelection());
}
},
{
text: 'Outdent',
handler: function () {
g.taskStore.outdent(g.getSelectionModel().getSelection());
}
},
{
text: 'Collapse all',
iconCls: 'icon-collapseall',
handler: function () {
g.collapseAll();
}
},
{
text: 'Expand all',
iconCls: 'icon-expandall',
handler: function () {
g.expandAll();
}
},
{
text: 'Zoom to fit',
iconCls: 'zoomfit',
handler: function () {
g.zoomToFit();
}
},
{
text: 'Add',
iconCls: 'icon-add',
handler: function () {
var newTask = new taskStore.model({
Name: 'New task',
leaf: true,
PercentDone: 0
});
taskStore.getRootNode().appendChild(newTask);
}
},
{
text: 'Save',
iconCls: 'icon-save',
handler: function () {
taskStore.sync();
}
},
{
text: 'Delete',
iconCls: 'icon-delete',
handler: function () {
debugger;
var me = this;
Ext.Msg.show({
title: 'Delete task?',
msg: 'Are you sure you want to delete selected tasks ?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function (button) {
if (button === 'yes') {
var tasks = g.getSelectionModel().selected;
g.taskStore.remove(tasks.items);
taskStore.sync();
}
}
});
}
}
]
});
this.callParent(arguments);
},
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
};
}
});
Where am I wrong please tell me.
Thanks.
