PDA

View Full Version : b is undefined error while loading extGanttPanel to window



rushi2440
4 Feb 2012, 1:35 AM
hi sencha forum member

I am having the grid panel containing the list of Projects the view is shown below.
31362

When the user double click the particular row I take the Id of the project and based on it I fires the query to the database that returns the list of TASK associated with that particular project. And based on it I open the window containing the GanttPanel my view is somewhat looks like below screen.
31363

my projectGanttpanel.js code is below

TaskPriority = {
Low : 0,
Normal : 1,
High : 2
};
var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',

proxy : {
type : 'ajax',
method: 'GET',
api: {
read: 'task/GetTask.action',
create: 'task/CreateTask.action',
destroy: 'task/DeleteTask.action',
update: 'task/UpdateTask.action'
},
writer : new Ext.data.JsonWriter({
//type : 'json',
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;
}
}
})
}
});

var dependencyStore = Ext.create("Ext.data.Store", {
autoLoad : true,
autoSync : true,
model : 'gantt.model.Dependency',
proxy: {
type : 'ajax',
method: 'GET',
reader: new Ext.data.JsonReader({
root: 'dependencydata',
type : 'json'
}),
writer : new Ext.data.JsonWriter({
root: 'dependencydata',
type : 'json',
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
encode : true,
writeAllFields : true
}),
api: {
read : 'dependencies/GetDependencies.action',
create: 'dependencies/CreateDependencies.action',
destroy: 'dependencies/DeleteDependencies.action'
}
}
});


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

Ext.define('gantt.view.projectmgt.projectGanttpanel', {
extend: "Gnt.panel.Gantt",
id: 'projectganttpanel',
alias: 'widget.projectganttpanel',
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,
width: '100%',
height: '98%',
startDate: start,
endDate: end,
multiSelect: true,
cascadeChanges: true,
viewPreset: 'weekAndDayLetter',
recalculateParents: false,

// 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
};
},

// 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';
}
}
},
{
xtype : 'booleancolumn',
width : 50,

header : 'Manual',

dataIndex : 'ManuallyScheduled',

field : {
xtype : 'combo',
store : [ 'true', 'false' ]
}
}
],
taskStore: taskStore,
dependencyStore: dependencyStore,
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: 'Navigation',
columns: 2,
defaults: {
scale: 'large'
},
items: [{
iconCls : 'icon-prev',
scope : this,
handler : function() {
this.shiftPrevious();
}
},
{
iconCls : 'icon-next',
scope : this,
handler : function() {
this.shiftNext();
}
}]
},{
xtype: 'buttongroup',
title: 'View tools',
columns: 2,
defaults: {
scale: 'small'
},
items: [
{
text : 'Collapse all',
iconCls : 'icon-collapseall',
scope : this,
handler : function() {
this.collapseAll();
}
},
{
text : 'Zoom to fit',
iconCls : 'zoomfit',
handler : function() {
this.zoomToFit();
},
scope : this
},
{
text : 'Expand all',
iconCls : 'icon-expandall',
scope : this,
handler : function() {
this.expandAll();
}
}
]
},{
xtype: 'buttongroup',
title: 'View resolution',
columns: 2,
defaults: {
scale: 'large'
},
items: [{
text: '10 weeks',
scope : this,
handler : function() {
this.switchViewPreset('weekAndDayLetter');
}
},
{
text: '1 year',
scope : this,
handler : function() {
this.switchViewPreset('monthAndYear');
}
}
]},{
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: 'icon-zoomtofit',
handler: function () {
g.zoomToFit();
}
},
{
text: 'Save',
iconCls: 'icon-save',
handler: function () {
taskStore.sync();
}
},
{
text: 'Add new Root Node',
iconCls: 'icon-save',
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
})
);
}
}
]

});

when the user double click the grid i make an ajax request using below code

Ext.Ajax.request({
url : 'projecttask/GetprojectTasks.action',
method: 'GET',
params: {'id':record.get('id')},
scope: this, // add the scope as the controller
success : function(response, opts) {
this.getProjectGanttwindow().show();
},
failure : function(response, opts) {
alert('Export file failed!')
}
});

based on response I execute the method this.getProjectGanttwindow().show(); code is below

Ext.define('gantt.view.projectmgt.projectGanttwindow', {
extend: 'Ext.window.Window',
alias: 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform: 1,
id: 'projectganttwindow',
title: 'Gantt Panel Window',
width: 450,
height: 350,
closeAction: 'destroy',
flex: 1,
isWindow: true,
constrain: true,
stateful: false,
maximizable: true,
initComponent: function() {
Ext.apply(this, {
xtype: 'form',
items: [{
xtype: 'projectganttpanel',
width: '100%',
height: '98%'
}]
});

this.callParent(arguments);
}
});

so when the window open I get my ganttPanel inside it. but instead I am getting b is undefined error.
When i changed the closeAction: 'destroy' to closeAction: 'hide' the window appears but the ganttPanel data contained in it are still that old one.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

mitchellsimoens
4 Feb 2012, 6:26 AM
You should not use Ext.create within the prototype when using Ext.define.

rushi2440
5 Feb 2012, 10:54 PM
hi. mitchellsimoens

i figured out the problem and solved it . Thanks for your help.
I am having another problem in which i need your support.
I am having one grid containing all project details. This grid has its own controller, models, stores. When I double click on the grid it passes the id to my server side.

Based on the id passed I execute some query to my database and then returned the data back to client in JSON format. And based on successful response I show another window, which contains all the data returned back from server to client.

But the main problem is that the window popup doesn't contain the updated data. Means for the first time when I clicked the grid Id passed correctly and the window is created correctly. Now after closing that popup window and again when I clicked the grid, window popup comes but the data contained in it is not updated data.

So what should I do so my window shows me the updated data, based on the grid Id passed.

on double click the grid i execute the below code

editProject: function(grid, record) {
console.log('Double clicked on ' + record.get('id'));
Ext.Ajax.request({
url : 'projecttask/GetprojectTasks.action',
method: 'GET',
params: {'id':record.get('id')},
scope: this, // add the scope as the controller
success : function(response, opts) {
this.getProjectGanttwindow().show();
},
failure : function(response, opts) {
alert('Export file failed!')
}
});


and my ProjectGanttWindow code is below

Ext.define('gantt.view.projectmgt.projectGanttwindow', {
extend: 'Ext.window.Window',
alias: 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform: 1,
id: 'projectganttwindow',
title: 'Gantt Panel Window',
width: 450,
height: 350,
closeAction: 'hide',
flex:1,
modal: true,
constrain: true,
closable : true,
maximizable: true,
stateful: false,

initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'projectganttpanel',
width: '100%',
height: '98%'
}]
});


this.callParent(arguments);
}
});


my ProjectGanttWindow contains xtype projectganttpanel code is below

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


var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',
storeId: 'taskStore',
autoLoad : false,
autoSync : true,
proxy : {
type : 'ajax',
method: 'GET',
api: {
read: 'task/GetTask.action',
create: 'task/CreateTask.action',
destroy: 'task/DeleteTask.action',
update: 'task/UpdateTask.action'
},
writer : new Ext.data.JsonWriter({
//type : 'json',
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;
}
}
})
}
});


var dependencyStore = Ext.create("Ext.data.Store", {
autoLoad : true,
autoSync : true,
model : 'gantt.model.Dependency',
storeId: 'dependencyStore',
proxy: {
type : 'ajax',
method: 'GET',
reader: new Ext.data.JsonReader({
root: 'dependencydata',
type : 'json'
}),
writer : new Ext.data.JsonWriter({
root: 'dependencydata',
type : 'json',
totalPropery: 'total',
successProperty : 'success',
idProperty : 'id',
encode : true,
writeAllFields : true
}),
api: {
read : 'dependencies/GetDependencies.action',
create: 'dependencies/CreateDependencies.action',
destroy: 'dependencies/DeleteDependencies.action'
}
}
});


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


//create the downloadframe at the init of your app
this.downloadFrame = Ext.getBody().createChild({
tag: 'iframe'
, cls: 'x-hidden'
, id: 'iframe'
, name: 'iframe'
});
//create the downloadform at the init of your app


this.downloadForm = Ext.getBody().createChild({
tag: 'form'
, cls: 'x-hidden'
, id: 'form'
, target: 'iframe'
});

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


var params = new Object();
Ext.define('gantt.view.projectmgt.projectGanttpanel', {
extend: "Gnt.panel.Gantt",
id: 'projectganttpanel',
alias: 'widget.projectganttpanel',
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',
'gantt.store.taskStore',
'gantt.store.dependencyStore'
],
leftLabelField: 'Name',
loadMask: true,
width: '100%',
height: '98%',
startDate: start,
endDate: end,
multiSelect: true,
cascadeChanges: true,
viewPreset: 'weekAndDayLetter',
recalculateParents: false,

// 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
};
},


// 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';
}
}
},
{
xtype : 'booleancolumn',
width : 50,

header : 'Manual',

dataIndex : 'ManuallyScheduled',

field : {
xtype : 'combo',
store : [ 'true', 'false' ]
}
}
],
taskStore: taskStore,
dependencyStore: dependencyStore,
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: 'Navigation',
columns: 2,
defaults: {
scale: 'large'
},
items: [{
iconCls : 'icon-prev',
scope : this,
handler : function() {
this.shiftPrevious();
}
},
{
iconCls : 'icon-next',
scope : this,
handler : function() {
this.shiftNext();
}
}]
},{
xtype: 'buttongroup',
title: 'View tools',
columns: 2,
defaults: {
scale: 'small'
},
items: [
{
text : 'Collapse all',
iconCls : 'icon-collapseall',
scope : this,
handler : function() {
this.collapseAll();
}
},
{
text : 'Zoom to fit',
iconCls : 'zoomfit',
handler : function() {
this.zoomToFit();
},
scope : this
},
{
text : 'Expand all',
iconCls : 'icon-expandall',
scope : this,
handler : function() {
this.expandAll();
}
}
]
},{
xtype: 'buttongroup',
title: 'View resolution',
columns: 2,
defaults: {
scale: 'large'
},
items: [{
text: '10 weeks',
scope : this,
handler : function() {
this.switchViewPreset('weekAndDayLetter');
}
},
{
text: '1 year',
scope : this,
handler : function() {
this.switchViewPreset('monthAndYear');
}
}
]},{
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: 'icon-zoomtofit',
handler: function () {
g.zoomToFit();
}
},
{
text: 'Save',
iconCls: 'icon-save',
handler: function () {
taskStore.sync();
}
},
{
text: 'Add new Root Node',
iconCls: 'icon-save',
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
})
);
}
}

});