Ext.LoadMask() and dom.firstChild error in IE

[willgillen]

In a project I'm currently working on using Ext 1.1.1, I have setup an Ext.View. However, the customer is adamant about having a "Loading..." mask because it is taking 2-3 seconds to load the datastore into the view with Ajax.

So, I have added an Ext.LoadMask:


lm = new Ext.LoadMask(el, {store:ds});


It works great on the first load in IE, but when I reload the datastore associated with the view ("ds" above), IE generates an error: "dom.firstChild is null or not an object".

I have read several other threads here on ExtJS Forums, but there doesn't seem to be a final resolution for this. Does anyone else have this same problem, and have any kind of workable solution?

Thanks!

-- W.G.

[mystix]

pls post more details as per 8887.

[ZooKeeper]

I'm having exactly the same issue. Happens in extall.js
It looks like it's failing to access the child of the mask div.


mask : function(msg, msgCls){
if(this.getStyle("position") == "static"){
this.setStyle("position", "relative");
}
if(!this._mask){
this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);
}
this.addClass("x-masked");
this._mask.setDisplayed(true);
if(typeof msg == 'string'){
if(!this._maskMsg){
this._maskMsg = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
}
var mm = this._maskMsg;
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg; <--- HERE
mm.setDisplayed(true);
mm.center(this);
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){
this._mask.setHeight(this.getHeight());
}
return this._mask;
},

Probably it's solved as for 2.0, but it looks like a bug to me.
If no one knows what's that, I'll probably make a live demo.

[jsakalos]

Thank you for the bug report. We will investigate it and we will inform you on the result.

[LuWa]

Is there any solution now? I have exactly the same problem and want to solve it.

[brian.moeskau]

It's in the queue, and we'll let you know.

[aendo]

Hello, is the fix still in the queue? Do you have any rough ETA for it?
Thanks.

[brian.moeskau]

If anyone is still having this issue, please post a test case that reproduces the problem along with whether or not it affects only 1.x or 2.x also and I'll look into it further.

[LuWa]

I still have this Problem with Ext 1.x with the EditorGrid

[brian.moeskau]

Can you provide a test case?

[LuWa]

var cm = new Ext.grid.ColumnModel([{
header: 'Vorname',
dataIndex: 'vorname',
width: 150,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true,
inputType: 'text'
}))
}, {
header: 'Nachname',
dataIndex: 'nachname',
width: 150,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true,
inputType: 'text'
}))
}, {
header: 'Firmenname',
dataIndex: 'firmenname',
width: 200,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true,
inputType: 'text'
}))
}, {
dataIndex: 'options',
width: 65,
sortable: false,
resizable: false,
editable: false
}]);

var grid = new Ext.grid.EditorGrid('topic-grid', {
ds: AddressDatastore,
cm: cm,
loadMask: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect: false}),
enableColLock: false,
enableDragDrop: true
});

// Header-Toolbar
var tb = new Ext.Toolbar(grid.getView().getHeaderPanel(true));

tb.add({
icon: 'images/add.gif',
text: 'Adresse hinzuf&uuml;gen',
cls: 'x-btn-text-icon',
handler: function() {
addAddress();
}
}, {
icon: 'images/csv_import.gif',
text: 'CSV importieren',
cls: 'x-btn-text-icon',
handler: function() {
csvAddressImport();
}
}, {
icon: 'images/csv_export.gif',
text: 'CSV exportieren',
cls: 'x-btn-text-icon',
handler: function() {
csvAddressExport();
}
});

I have the following problem:
When i change the Grid my Toolbar can't be displayed again.

[brian.moeskau]

To clarify, if someone can post a working test case that we can drop in and run, I'll look into it. We have too many threads to respond to to try and build our own test cases from scratch for everything people post. If you can please help us out by providing something we can work with, we'll take a look.

[cousin_itt]

I've bumped into this one too.
I'll post a test case when I've recovered from Monday's hefty deadline.

Adding the following to ext-all-debug.js just inside the destroy function of the Ext.LoadMask.prototype fixes the problem for me:


this.el._mask = '';
this.el._maskMsg = '';


A more elegant fix :

ds.on('beforeload', function() {
if(this.loadMask) {
this.loadMask.el._mask = '';
this.loadMask.el._maskMsg = '';
}
},grid);

Hope this helps.
Cheers.