TypeError: el is null, el = el.dom || Ext.getDom(el); in ext-all-dev.js (ligne 19839)

[Elfayer]

Hi,
I have that error that I don't understand... From that code :


'#submitUpload': {
/* When you click on the "upload" button on the upload window */
click: function () {
if (!FormData) {
alert('Sorry, your browser doesn\'t support the File API');
return true;
}
this.uploadMethod(files);
}
},

uploadMethod: function (files) {
var me = this;
var fileName = me.fileNotUploaded();

if (fileName != null) {
var i = 0;
while (i < files.length) {
if (files[i].name == fileName)
var file = files[i];
i++;
}
console.log(file);
var formData = new FormData();

formData.append('file', file);
formData.append('folderId', (Ext.ComponentQuery.query('#treePanel')[0]).getSelectionModel().getSelection()[0].data.id);

var xhr = me.getXMLHttpRequest();

xhr.open('post', '/File/Upload', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if ((xhr.response).indexOf("error") != -1) {
me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('status', '<img src="/Content/images/error.png">');
me.getUploadStore().commitChanges();
}
else {
me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('status', '<img src="/Content/images/done.png">');
me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('progress', 100);
me.getUploadStore().commitChanges();
me.getUserSessionStore().load();
me.getFilesStore().load();
me.uploadMethod(files);
}
// }
}
};
xhr.upload.addEventListener("progress", function (e) {
me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('status', '<img src="/Content/images/loading.png">');
me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('progress', Math.round((e.position / e.totalSize) * 100));
me.getUploadStore().commitChanges();
});
xhr.send(formData);
}
else
me.getUploadStore().remove((Ext.ComponentQuery.query('#fileGrid')[0]).getSelectionModel().getSelection());
},

getXMLHttpRequest: function () {
var xhr = null;

if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Your browser do not support WMLHttpRequest object...");
return null;
}

return xhr;
},

fileNotUploaded: function () {
var ret = null;
var i = 0;

Ext.each((Ext.ComponentQuery.query('#fileGrid')[0]).getSelectionModel().getSelection(), function (item) {
if (item.data.progress == 0 && i == 0) {
i++;
ret = item.data.fileName;
}
});
return ret;
}

[Elfayer]

It's coming from this code, but I don't find the error.

header: '<center>Progress</center>',
dataIndex: 'progress',
align: 'center',
flex: 1,
sortable: false,
hideable: false,
resizable: false,
renderer: function (value) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('progressbar', {
renderTo: id,
value: (value / 100),
text: value.toString() + ' %',
flex: 1
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}]

This is a column of a grid and the if I put the render on comment, I don't get the error anymore. Any idea?

[vietits]

You should check to make sure the HTML element with specified id has existed before rendering a component to it. Because, renderer will be called several times so it is not sure that the DIV element with specified id will exist. You can check this by adding some debug code to your code.


renderer: function (value) {
var id = Ext.id();
// console.log('render grid cell - id: ', id); // DEBUG
Ext.defer(function () {
// console.log('render progressbar in div with id: ', id); // DEBUG
if(Ext.get(id)){
Ext.widget('progressbar', {
renderTo: id,
value: (value / 100),
text: value.toString() + ' %',
flex: 1
});
}
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}

BTW: Have a look at my component: Ext.grid.column.Component (http://www.sencha.com/forum/showthread.php?174504-Its.grid.column.Component-Component-Column-for-Ext-4.0.7). It allows you to render Ext components in grid cells.

[Elfayer]

I get things like that..39479

EDIT: And I don't have the error anymore with the "if (Ext.get(id))", but I have none progression now. It never gets in.

[vietits]

You should try with one record first to see what happens. Also, add a console.log() inside the if (Ext.get(id)){} block to check whether or not the if block is executed. The time of defer is also important.

[Elfayer]

It don't get in during the upload, only twice. First, for the initialization and then when XMLHttpRequest tell me the upload is finish, I'm doing

me.getUploadStore().getAt(me.getUploadStore().findExact('fileName', fileName)).set('progress', 100);

[vietits]

Not getting in the if block means the DIV element does not exist at the time the deferred function is called. Try to adjust the time of delay or modify your code as below to repeat calling renderProgressBar() until the element exists.


renderer: function(){
...
this.renderProgressBar(id, 0);
return Ext.String.format('<div id="{0}"></div>', id);
},
renderProgressBar: function (id, repeat){
if(Ext.get(id)){
Ext.widget(...)
} else if(repeat < 10) { // repeat 10 times
Ext.defer(this.renderProgressBar, 10, this, [id, ++repeat]);
}
}

[Elfayer]

Ok now it is working with no error, but the bar doesn't update anymore... and oddly I regulary get the progress value in the renderer function.

[Elfayer]

I can't fin any solution for it, here I am :

header: '<center>Progress</center>',
dataIndex: 'progress',
align: 'center',
flex: 1,
sortable: false,
hideable: false,
resizable: false,
renderer: function (value) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('progressbar', {
renderTo: id,
value: (value / 100),
text: value.toString() + ' %',
flex: 1
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}]

I alwas get the same error with no progression of the bar. There are weird things, like the id I get with "Ext.id()" change every time it gets in. I think that's why I don't see the bar while uploading. I "renderTo: id" but the id always change. Can someone help?

[vietits]

1. Ext.id() will generate a unique value each time you call it.

2. Your code in previous post is the same your code in post #2. It will cause error because the DIV element you render the progressbar to may not exist. It maybe because you render too early (before the DIV element is rendered) or too late (the DIV element has been removed because the cell is re-rendered).

Did you try to use my component: Its.grid.column.Component (http://www.sencha.com/forum/showthread.php?174504-Its.grid.column.Component-Component-Column-for-Ext-4.0.7)?