PDA

View Full Version : el.dom is null in 4.1.3 Render code



bbrace
6 Feb 2013, 10:00 AM
Hi,

I am upgrading from 4.0 to 4.1.3. I have several form labels defined and am now getting the error

'el.dom is null or not an object' in the ExtJS finishRender function

finishRender: function(containerIdx) {
.....
if (!me.container) {
me.container = Ext.get(me.el.dom.parentNode);
}

Here is partial panel definition, 'me' is referring to 'searchlabel'


Ext.define('Docs.view.CenterPanel', {
extend: 'Ext.panel.Panel',
id: 'CenterPanel',
region: 'center',
margins: '0 0 0 0',
layout: 'fit',
tbar: [{
id: 'searchLabel',
xtype: 'label',
text: 'Search: ',
hidden: true,
style: 'font: normal 11px Arial'

},
FYI - this worked fine in 4.0 and even works fine in extjs-4.1.0-rc3

Arg0n
6 Feb 2013, 1:24 PM
I had the same problem twice.

I misspelled a name of a store class
It was anything messed up with ids
I dont think your panel is the problem...
The error means (I guess) that a component couldn't be rendered and extjs tries to do something with its dom... baaam.

Try some debugging :x

bbrace
6 Feb 2013, 2:28 PM
thanks for your reply. This code has worked fine for over a year in in 4.0. Using 4.1.rc3 it works too but when I use 4.1.3 I get the error on the first item in the toolbar. I read in the Upgrade guide that Toolbar is now a first class component- whatever that means. I think that maybe the way to add toolbars to a panel has changed in 4.3.1 but I see examples where they are still using tbar property of a Panel.

Arg0n
7 Feb 2013, 1:13 AM
You could try it with dockeditems (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-dockedItems).



dockedItems: [{
xtype: 'toolbar',
alias: 'widget.news-toolbar',
dock: 'top',
items: [
{
xtype: 'button',
itemId: 'button-news-category-add',
text: 'Neue Rubrik',
disabled: true,
iconCls: 'icon-add',
action: 'news-category-add',
acl: {
rights: [
'flag_content_news_admin'
]
}


}, {
xtype: 'tbseparator'
},{
xtype: 'button',
itemId: 'button-news-add',
text: 'Neue News',
disabled: true,
iconCls: 'icon-add',
action: 'news-add',
acl: {
rights: [
'flag_content_news_content',
'flag_content_news_admin'
]
}
}
]
}],

bbrace
7 Feb 2013, 8:50 AM
This works great in 4.0 and 4.1.rc3 but fails for me when using 4.1.3. It only lets me add xtype: label or xtype: tbtext to dockedItems, all other xtypes like button, textfield, etc give the el.dom is null error in finishRender function.

Seems like something must be failing in ExtJS internally when creating interactive elements on toolbar?

Arg0n
7 Feb 2013, 9:02 AM
I'm using ExtJs 4.1.1a... so I can't reproduce this error =/

okwei
12 Mar 2013, 6:44 AM
I got the same problem. I had to add the items in afterrender call to work around this.

It only happen in IE (7,8) so far. IE 9 and 10 not tested.