PDA

View Full Version : this.body is null



TheMonolith
26 Feb 2010, 1:28 AM
With the following code:



var stampPanel = new Ext.form.FormPanel({
title: 'Stempel',
//layout: 'form',
bodyStyle: 'padding: 20px;',
items: [{
xtype: 'checkbox',
fieldLabel: 'Stempel hinzufügen',
checked: false,
handler: function(checkbox, checked){
if (checked == false) {
Ext.getCmp('stampPanel_item1').disable();
Ext.getCmp('stampPanel_item2').disable();
Ext.getCmp('stampPanel_item3').disable();
Ext.getCmp('stampPanel_item4').disable();
Ext.getCmp('stampPanel_item5').disable();
Ext.getCmp('stampPanel_item6').disable();
Ext.getCmp('stampPanel_item7').disable();
Ext.getCmp('stampPanel_item8').disable();
}
else {
Ext.getCmp('stampPanel_item1').enable();
Ext.getCmp('stampPanel_item2').enable();
Ext.getCmp('stampPanel_item3').enable();
Ext.getCmp('stampPanel_item4').enable();
Ext.getCmp('stampPanel_item5').enable();
Ext.getCmp('stampPanel_item6').enable();
Ext.getCmp('stampPanel_item7').enable();
Ext.getCmp('stampPanel_item8').enable();
}
}
}
[...]
}
I get the error:


this.body is null
onRender(Object { name="ct"}, Object { name="position"})ext-all-debug.js (Zeile 23805)
onRender(Object { name="ct"}, Object { name="position"})ext-all-debug.js (Zeile 61002)
render(Object { name="container"}, Object { name="position"})ext-all-debug.js (Zeile 15381)
renderItem(Object { name="c"}, Object { name="position"}, Object { name="target"})ext-all-debug.js (Zeile 19211)
renderItem(Object { name="c"}, Object { name="position"}, Object { name="target"})ext-all-debug.js (Zeile 21360)
renderAll(Object { name="ct"}, Object { name="target"})ext-all-debug.js (Zeile 19202)
onLayout(Object { name="ct"}, Object { name="target"})ext-all-debug.js (Zeile 19188)
onLayout(Object { name="ct"}, Object { name="target"})ext-all-debug.js (Zeile 19693)
layout()ext-all-debug.js (Zeile 19182)
doLayout(Object { name="shallow"}, Object { name="force"})ext-all-debug.js (Zeile 18890)
doLayout(Object { name="shallow"}, Object { name="force"})ext-all-debug.js (Zeile 18897)
doLayout(Object { name="shallow"}, Object { name="force"})ext-all-debug.js (Zeile 18897)
doLayout(Object { name="shallow"}, Object { name="force"})ext-all-debug.js (Zeile 18897)
afterRender()ext-all-debug.js (Zeile 18584)
render(Object { name="container"}, Object { name="position"})ext-all-debug.js (Zeile 15420)
Component(Object { name="config"})ext-all-debug.js (Zeile 14742)
apply()ext-base.js (Zeile 7)
apply()ext-base.js (Zeile 7)
apply()ext-base.js (Zeile 7)
(?)()forms.js (Zeile 483)
call()ext-all-debug.js (Zeile 1881)


chrome://firebug/content/blank.gif this.body.addClass(this.bodyCls + '-noheader');


With Firebug I found out that the error occurs when the following line is executed:



handler: function(checkbox, checked){
Also, I can add that the error started when I changed the type of stampPanel from Panel to FormPanel.

Any ideas you guys?

2 Mar 2010, 5:03 AM
are those items rendered?

Mike Robinson
2 Mar 2010, 8:18 AM
A thimble-ful of additional explanation ...

When you define an ExtJS object, DOM elements do not yet necessarily exist. They will be created on demand, in a process called "rendering." Until this happens, any properties that are to refer to DOM elements will be undefined (null?).

You discover when an element has been rendered by listening for a render event, but there is a small catch: you should always use a small delay in your event-handler. You might get the event a few milliseconds before the browser and the DOM is really ready, and this behavior is not strictly repeatable ("from time to time" nor "from browser to browser"). An imperceptibly small delay (an optional parameter of addListener) seems to bypass the problem.