loadMask grid IE7 problem

[damien]

I have a gridpanel, with a grid. Loading the page in FF the first time is OK. the second time it doesn't show the loadMask. In IE explorer the first time OK, the second time i load the page it gives a error and doesnt show the grid. Removing the



loadMask:true


in the grid fixes the problem. Everything works fine, but i want my loadMask :-)



<script type="text/javascript">
Ext.onReady(function(){
var ds;
var columnModel;
var grid;

function dialog_win(titel,boodschap,melding){
var regels;
regels=true;
if ((melding.length==0) || (melding==null)) regels=false;
var boodschap = Ext.MessageBox.show({
title: titel,
msg: boodschap,
width:300,
buttons: Ext.MessageBox.OK,
multiline: false,
value:melding,
multiline:regels
});
}

function setupDataSource() {
ds = new Ext.data.Store({
baseParams: {parameter: '<?php echo $_POST[parameter];?>'},
proxy: new Ext.data.HttpProxy({url:'http://localhost:80/PSA_Finance/get_handlers/get_dealers.php'}),
reader: new Ext.data.JsonReader(
{root: 'records',totalProperty: 'aantal', id: 'sleutel'},
[
{name: 'sleutel'},
{name: 'dealernr'},
{name: 'DA'},
{name: 'rayon'},
{name: 'b_naam'},
{name: 'b_adres'},
{name: 'b_postcode'},
{name: 'b_plaats'},
{name: 'b_postbus'},
{name: 'b_postcode_pb'},
{name: 'b_plaats_pb'},
{name: 'b_telefoonnr'}
]
)
}
);
}

function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[{
header: "DealerNr",
dataIndex: 'dealernr',
sortable: true,
width: 50
},{
header: "DA",
sortable: true,
dataIndex: 'DA',
width: 25
},{
header: "Rayon",
sortable: true,
dataIndex: 'rayon',
width: 40
},{
header: "Bedrijf",
sortable: true,
dataIndex: 'b_naam',
width: 200
},{
header: "Adres",
sortable: true,
dataIndex: 'b_adres',
width: 150
},{
header: "Postcode",
sortable: true,
dataIndex: 'b_postcode',
width: 65
},{
header: "Plaats",
sortable: true,
dataIndex: 'b_plaats',
width: 85
},{
header: "Postbus",
hidden:true,
sortable: true,
dataIndex: 'b_postbus',
width: 85
},{
header: "Postcode postbus",
hidden:true,
sortable: true,
dataIndex: 'b_postcode_pb',
width: 85
},{
header: "Plaats postbus",
hidden:true,
sortable: true,
dataIndex: 'b_plaats_pb',
width: 85
},{
header: "Telefoonnr",
hidden:true,
sortable: true,
dataIndex: 'b_telefoonnr',
width: 85
}]
);
}
}

function buildGrid() {
grid = new Ext.grid.Grid('div-laden',
{
ds: ds,
cm: columnModel,
autoSizeColumns: false,
loadMask:true <-removing this and i can load this script multiple times without problems.
}
);

grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data.b_naam);
});

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Onderwerpen {0} - {1} van {2}',
emptyMsg: "Geen records"
});
paging.add('-', 'Filter: ');

var filter = Ext.get(paging.addDom({
tag: 'input'
, type: 'text'
, size: '20'
, value: ''
, cls: 'x-grid-filter'
}).el);

paging.add('-');

var excel = paging.addButton({
icon: 'images/excel.gif',
minWidth:'16',
tooltip:'Export naar excel',
cls:"x-btn-icon"
});

excel.on('click',function(E){
var fil2 = filter.getValue();
dialog_win('Excel export',"Klik op onderstaand plaatje om de excelsheet te openen.<table align=center><tr><td align=center><a href=http://localhost:80/PSA_Finance/get_handlers/excel.php?filter="+fil2.replace(" ","%20")+"&parameter=<?php echo $_POST[parameter];?> target=_self><img src=images/excel.jpg align=center></a></td></tr></table>",'');
});

filter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER) // listen for the ENTER key
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want the filtered results to start from the first page
, limit: 25
}
});
});

filter.on('keyup', function(e) { // setup an onkeyup event handler
var key = e.getKey(); // assign the current key to a local variable
if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want unfiltered results to start from the first page
, limit: 25
}
});
});

filter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected

ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filter: filter.getValue(), // retrieve the value of the filter input and assign it to a property named filter (rename to suit your needs)
parameter: '<?php echo $_POST[parameter];?>'
};
});

ds.load({params:{start:0,limit:25}});
}

setupDataSource();
getColumnModel();
buildGrid();
innerLayout.add('center', new Ext.GridPanel(grid, {title: 'Dealers',autoScroll:false}));
});
</script>

[finian]

i have the same problem as you. but im using IE6. it seem to have the same problem.it's just fine in FF.but when it comes to the second time,the IE6 will have a error something like:"dom.firstChild is null or not a object".

[tryanDLS]

You say 'reload the page'. Do you mean that or do you mean some action on the page causes the grid to be reloaded/rebuilt. Are you loading this code via Ajax?

[damien]

with reload the page i mean reload the gridpanel (= the page). I reload the page with


Ext.get('div_example').load{
url:'url_page.php' (http://extjs.com/forum/'url_page.php');
}

and in the page i load a gridpanel


innerLayout.add(blabla , new gridpanel(Buildgrid(),{titel':"example'});


The code above is a example, not the real deal. Before i load the url with the code thats creates the gridpanel again i remove the div 'div_example' with the


.remove('div_example',false);

I think this removes everything on the gridpanel, but i think that something still remains in the DOM that gives a conflict the second time i load the page. I dont now how i can figure out what causes the problem.

IE gives the second time i load the page: dom.Childelement is empty.
I also find out that i can not show the hidden:true columns from the grd the second time.

[tryanDLS]

You need to destroy the grid before your recreate it. There are other threads about that. Why do you recreate it anyway - why not just reload the data? Are you changing the colModel/dataModel?

[damien]

If i destroy the panel (gridpanel) with remove,false it means everything on this div is detroyed 2 or not? Because that is what i am doing. Does this mean that remove only removes the panel but not the element on that panel?

From my menu (tree) the user can select maybe 30 different pages. I think its not smart to all create them (contentpanels/gridpanels) and hide or show them when the user clicks on the link in the menu. Thats why i got the idea off removing and creating the div/panels etc before loading them a again.

[pkristiana]

Ive got to set the ( _mask and _maskMsg) properties of div target for grid to null and its work in IE6.
like the following :
[code]
var el = Ext.get('div-laden')
el._mask = null;
el._maskMsg = null;
[code]
before rendering the grid.

[ don't have IE 7 to try it out :D]
fxkris

[ntulip]

I was not able to fix this with your code for IE6.


Ive got to set the ( _mask and _maskMsg) properties of div target for grid to null and its work in IE6.
like the following :
[code]
var el = Ext.get('div-laden')
el._mask = null;
el._maskMsg = null;
[code]
before rendering the grid.

[ don't have IE 7 to try it out :D]
fxkris

[auroraeosrose]

I worked around this bug by changing line 3356 of ext-all-debug.js to


mm.dom.innerHTML = '<div>' + msg + '</div>';

But it's kind of hacky - somehow hiding/showing/reparenting grids deletes that inner div in the _maskMsg on IE

[marco.braga]

I confirm the problem with 1.1.1, I'm having it now in my app.. Any updates?

[zzo]

Ya I have the exact same problem - the error IE7 gives is 'dom.firstChild' is null or not an object.
Then click debugging it in MS Script Editor the lines in ext-all-debug is:

mm.dom.firstChild.innerHTML = msg;

I guess after the grid renders the first time & gets reloaded there's no more firstChild.

Hope that helps to fix this bug.
thanks!
Mark

Unfortunately I can't point you to a live version showing this (which is completely & easily reproducible) as I've commented out loadMask: true for my live app until this is fixed..


This is ext 1.1

[LuWa]

I'm also waiting for a solution... Is there anyone now?

[ferr]

Just started having this problem in IE6, getting the 'dom.firstchild is null or not an object' error.. I do my development with FF2 by default so pinpointing the exact moment this began to happen in IE6 is tough. Any solutions / known causes for this problem?

edit: Ah! Very simple, an extra comma in a new column model's configuration options.