PDA

View Full Version : Debugger says: Cannot call method 'addClass' of null..



Wout92
5 Jun 2012, 6:23 AM
Hello forum,

I am working on a panel that needs to have a date-range form. The date-range form already works as expected in other parts of my app. The problem is when I want to use it in another section of my app it somehow throws an error. I include the rate-range form exactly the same as in the other parts of the app where it works fine.

This is my date-range form:


App.DateRangeFormPanel = Ext.extend(


function (configExternal) {
var me = this;
this.controller = configExternal.controller;


var config = {
labelWidth: 30,
style: 'padding: 5px',
border: false,
defaults: {
width: 200
},
defaultType: 'textfield',


items: [new Ext.form.DateField({
fieldLabel: 'From',
name: 'from',
anchor: '100%',
value: new Date(),
format: this.dateFormat,
listeners: {
'valid': this.from_valid,
scope: this
}


}), new Ext.form.DateField({
fieldLabel: 'To',
name: 'to',
anchor: '100%',
value: new Date(),
format: this.dateFormat,
listeners: {
'valid': this.to_valid,
scope: this
}
})]
};


Ext.apply(config, configExternal);
App.DateRangeFormPanel.superclass.constructor.call(this, config);


this.controller.on('dateRangeChanged', this.controller_dateRangeChanged, this);
},
Ext.FormPanel,
{
dateFormat: Date.patterns.NLdefault,


getValues: function() {
return this.getForm().getFieldValues();
},


controller_dateRangeChanged: function(range) {
if (!this.updating) {
this.getForm().setValues(range);
}
},


from_valid: function(field) {
this.updating = true;

var range = this.getValues();
this.controller.setDateRange(range.from, range.to);


delete this.updating;
},

to_valid: function(field) {
this.updating = true;


var range = this.getValues();
this.controller.setDateRange(range.from, range.to);


delete this.updating;
}
});


Ext.reg('app-daterange', App.DateRangeFormPanel);


This is how I use the form in my app:


layout: { type: 'hbox', pack: 'start', align: 'stretch' },
border: false,
items: [{
flex: 1,
title: 'Select the date range',
items: [{
xtype: 'app-daterange',
controller: controller
}]
},
{
flex: 1,
title: 'BOGUS',
html: 'BOGUS',
}


This combination throws the following error:
Uncaught TypeError: Cannot call method 'addClass' of null

When I dig into the debugger I can see it wants to call the addClass method on the body propery of the date-range form. Strange is DateRangeFormPanel.body is set to null.

In my opinion i'm doing things the correct way since it works in other parts of my application. What is going wrong?

Thank you in advance!

Wout92
6 Jun 2012, 1:36 AM
Somebody that could push me in the right direction?

What could cause the body to be empty?

EDIT: Bug is only in chrome..

scottmartin
6 Jun 2012, 7:14 AM
In discussing this with Mitchell, he suggested the following changes:



App.DateRangeFormPanel = Ext.extend(Ext.form.FormPanel, {
dateFormat : Date.patterns.NLdefault,

constructor : function (configExternal) {
var me = this;

this.controller = configExternal.controller;

var config = {
labelWidth : 30,
style : 'padding: 5px',
border : false,
defaults : {
width : 200
}, defaultType : 'textfield',
items : [
new Ext.form.DateField({
fieldLabel : 'From',
name : 'from',
anchor : '100%',
value : new Date(),
format : this.dateFormat,
listeners : {
valid : this.from_valid,
scope : this
}
}),
new Ext.form.DateField({
fieldLabel : 'To',
name : 'to',
anchor : '100%',
value : new Date(),
format : this.dateFormat,
listeners : {
valid : this.to_valid,
scope : this
}
})
]
};

Ext.apply(config, configExternal);

App.DateRangeFormPanel.superclass.constructor.call(this, config);

this.controller.on('dateRangeChanged', this.controller_dateRangeChanged, this);
},

etValues : function () {
return this.getForm().getFieldValues();
},

controller_dateRangeChanged : function (range) {
if (!this.updating) {
this.getForm().setValues(range);
}
},

from_valid : function (field) {
this.updating = true;

var range = this.getValues();
this.controller.setDateRange(range.from, range.to);

delete this.updating;
},

to_valid : function (field) {
this.updating = true;

var range = this.getValues();
this.controller.setDateRange(range.from, range.to);

delete this.updating;
}
});

Ext.reg('app-daterange', App.DateRangeFormPanel);


Regards,
Scott.

Wout92
7 Jun 2012, 12:00 AM
Thank you for re-factoring the code. Really appreciate that. Looks like its now being used like it used to.

But the problem still occurs. I know a little more about the bug now.

Let me demonstrate what is working an what not:


title: 'Select the date range',
items: [{
xtype: 'app-daterange',
controller: controller
}]


Throws error: Uncaught TypeError: Cannot call method 'addClass' of null


title: 'Select the date range',
items: new app.daterange()


Throws error: Uncaught TypeError: Cannot call method 'addClass' of null


title: 'Select the date range',
items: new Ext.form.FormPanel()


Throws error: Uncaught TypeError: Cannot call method 'addClass' of null


title: 'Select the date range',
items: new Ext.Panel()


Just works..

Hope this adds some info about the error..

Kind Regards
Wout

sword-it
7 Jun 2012, 2:50 AM
Hi,
As you show in your last post that it is giving error in case when you are using form as child item but when you are using Ext.Panel as child its not giving error.
It may be happen that you are doing form nesting in your page. You may take from following link:

http://www.sencha.com/forum/showthread.php?136050-ASK-Uncaught-TypeError-Cannot-call-method-addClass-of-null

Wout92
12 Jun 2012, 6:59 AM
Thanks you!
That post pointed me in the right direction..

I had an parent that extended from Ext.form.formPanel. Overlooked that for days.

Seems like copy pasting is not always the fastest way.