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.
first.jpg

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.
second.jpg

my projectGanttpanel.js code is below

Code:

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

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

Code:

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

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

Code:

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

Code:

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
	                     	})
	                          	);
	                         }
	                     }
	          
});

b is undefined error while loading extGanttPanel to window

Thread Tools

Search Thread

Display

Unanswered: b is undefined error while loading extGanttPanel to window

Unanswered: b is undefined error while loading extGanttPanel to window

window not showing the updated data based on grid row double clicked

window not showing the updated data based on grid row double clicked

Tags for this Thread