[Solved] Error :: Object Required :: ltWidth = hasLock ?

[cluettr]

When resizing a page that contains a grid I receive the following error within ext-all-debug.js:

var ltWidth = hasLock ? Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;

The operation I am performing is normal. I am resizing my browser window. Each time I drag the corner to resize it I receive the above error. This works when I first load the page. The second time I load the grid into a div I start receiving this error. My assumption is that this is a bug since the operations I am performing are quite normal and expected.

[cluettr]

Answering my own question here...

This is not a bug. To have the grids ignore browser resizing add the following to your grid configuration:


monitorWindowResize:false

[cluettr]

Oddly even with the above I am still seeing this error. Anyone have an idea as to what is is doing so I can better understand how to troubleshoot this?

[jack.slocum]

Can you provide more data - like how you are creating the grid - if you are recreating the grid, Ext version, doc type, etc.

[cluettr]

Yes, the grid is being recreated.

I don't know how to best explain this. Let me start by saying I do not use any of Ext for the main layout within the document.body (meaning the Ext contentPanels and such). I use my own.

With that being said I have a container (div) nested within the document.body which contains all of my layout (HTML). I have several layouts that are loaded into that container asyncronously via clicks. One of the layouts has two grids. The first time the layout is called everything is fine. After loading a different layout into the container and then loading the layout that contains the two grids I get the described error.

[jack.slocum]

A new grid into the same div or did you create a new container div? If it's a different div, does it have the same id? The reason I am going down this line is because it seems like a case of duplicate element/ids.

[cluettr]

A new grid into the same div.

I assume that although the contents of the container div is replaced the grids div still exists in the DOM?

Does destroying a div take care of this? having looked back at my code after you mentioned the duplicate id issue I see that I am not destroying the grids in anyway.

[cluettr]

Even with destroying the grid it seems to still be happening.

Code added to grid (note the destroy function):


return {
init : function() {
setupDefaultDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
},

destroy:function(boolVar){
if (grid)
{
grid.destroy(boolVar);
isCreated = false;
return true;
}
else
{
return false;
}
},
reconfigure:function(passed_value){
if (grid)
{
changeDataSource(passed_value);
grid.reconfigure(ds,columnModel);
ds.reload();

}
}

}


Code performing the actual destroy:


if(Grid_rma_details){
if(Grid_rma_details.isCreated){
alert('does gid exist:' + Grid_rma_details.isCreated);
Grid_rma_details.destroy(true);
alert('does gid exist:' + Grid_rma_details.isCreated);

}
}

[cluettr]

I simplified this... At no point does it ever tell me the grid does not exist...


if(Grid_rma_listing){
alert('Listing Grid Exists');
Grid_rma_listing.destroy(true);
if(!Grid_rma_listing){
alert('Listing Grid does not exist');
}
}

if(Grid_rma_details){
alert('Details Grid Exists');
Grid_rma_details.destroy(true);
if(!Grid_rma_details){
alert('Detials Grid does not exist');
}
}



return {
init : function() {
setupDefaultDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
},

destroy:function(boolVar){
if (grid)
{
grid.destroy(boolVar);
}
},
reconfigure:function(passed_value){
if (grid)
{
changeDataSource(passed_value);
grid.reconfigure(ds,columnModel);
ds.reload();

}
}

}

[cluettr]

More info... this only happens in IE 6 and 7, not Firefox.

[jack.slocum]

You won't be able to render a grid into the same div, at least I don't think it will work. I would recommend instead, insert a new div before the old grid (e.g. grid.container.insertSibling(...)), destroying the grid, remove the old container, and creating the new grid in the new container. It seems like a lot of work, but wrapped up in a function, it should be "write once" reusable.

[cluettr]

Thanks for the reponse Jack.

While I understand what you are saying I'm not sure how to implement that. Using the Domhelper to add a Sibling or append an element (div) seems pretty straight forward but there's nothing really for me to append the div to. It sounds like what is necessary is to create a new div and leave the old one each time I need to reload a grid? In my scenario this could add up to tens and at most hundreds of divs if the applications was used for a day or two without a reload.

If an element needs to exist on the page for me to add a child to it that won't be the case with the way my applicaition is modeled. My topmost container div hosts different applications (layouts) and when switching from one to the other most of the content and all the nested elements including the grid and its immediate parent/container are removed.

I'm fearful that this might be a show stopper for me.

I have one more question, why is it that the destroy function cannot delete the grids container div from the DOM? Then when I reload the content via the updatemanager it get's added back in as if it was never there in the first place?

[cluettr]

This kind of works... it's a but rough because it lacks the styling of the original div but I'm going to see if this will do what I need it to do...

function buildGrid(name) {

grid = new Ext.grid.EditorGrid(
name,
{
ds: ds,
cm: getColumnModel(),
monitorWindowResize:false,
enableRowHeightSync:true,


init : function() {
var randomnumber = Math.floor(Math.random()*100001);
Ext.DomHelper.append( 'listinggridparent', { tag: 'div', id: 'newlistinggrid' + randomnumber });
if (grid) { grid.destroy(true) } ;
setupDefaultDataSource();
buildGrid('newlistinggrid' + randomnumber );
}

[cluettr]

Jack and Company,

Please do not spend any more time on this... I now beleive that destroying the grid is actually taking care of the original issue. I have two grids on this page and disabling the second allows the first to render properly without the original error.

The new issue I am experiencing (error being 'this.cm' is null or not an object) seems to be isolated to the second of the two grids. I don't have a grasp on what is happening yet but I need to do some digging before anyone pursues this. Thanks.

Again, thanks for the follow up on all this...

[cluettr]

I attempted to create the second grid in the same manner I described and you suggested, while it creates the grid into a dynamically created div it still gives me the errors:

Error: 'this.ds' is null or not an object on var state = this.ds.getSortState(). And randomly I get the error 'style' is null or not an object.

More info at this thread... Something has to be wrong with either the second grid which I am leaning away from or there is some sort of bug maybe...

http://extjs.com/forum/showthread.php?p=48685

[cluettr]

I get this error even with the simplest of grids and on the initial page load. This has to be a bug! 'Bout to tear my hair out!

[tryanDLS]

I'm guessing you have a variable scoping issue. 'this' is not pointing to what you think it is when you execute that line. Set a BP there and look at what this is.

[cluettr]

Thanks for the response Tim. The issue I am referring to is the original problem:


var ltWidth = hasLock ? Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;


Having removed the div, reading it and then pupulating it with a new grid I still get the error. Starts of with Object Required then goes to that. Often times it renders itself as different error messages. As for it being a scope issue I am thinking it may not be that. Each of my grids is defined as distinct objects. One works, one does not. The code for each is nearly identical ans self contained and I'v re-written it from scratch 3 times. Ext will be the death of me!

[cluettr]

I've made significant progress with this. The issue was that the div did not exist when it was being populated. I had to restructure the order of my functions and wait for the div to load prior to calling the grid. I now have the page loading correctly on the following occasions and in the following order:

1) Both grids load correctly when initially brings up the page.
2) Both grids load properly on performing the second load via an XHR.
3) Sometimes both grids load properly on performing the third load via an XHR.

Then i get the Item(...) is null or not an object...

Randomly it will work after that for a while then die so it is very random. Any thoughts on where to look given that this happens randomly and seems to clear up for a bit then happen again randomly?

Could this be that the garbage collection is happening behind the scenes and I don't know it? If that is the case I think I am now at a point where Jacks comments make sense (possibly needing to generate/append a new div element within the grid container and using that to host the new grid. Then I assume that the garbage collection will merely remove the div that I have destroyed. If there was a way to force the garbage collection rather than wait the 30 seconds wouldn't this work? Or is there a way to change the id of the div prior to removing it?

[cluettr]

The following thread contains information and some code that helped resolved my issue.

http://extjs.com/forum/showthread.php?p=49503