View Full Version : Problems when re-using variables for Ext components

11 Apr 2011, 5:49 AM
I am currently developing a web application that heavily uses Ext components (mainly grids) and is almost 100% ajax based. In the application there is a main content element where HTML and javascript is injected when a new page/area of the application is loaded, and this often contains code to create grids. I have noticed that when loading in the same page containing a grid component multiple times in succession, the grid will start to show some very weird bugs, namely in the grid column menus. Some times the menu items of the first menu (sorting items, Columns item) will be duplicated, other times the column list items in the secondary menu will be duplicated.)


What makes it even harder to try to debug is that this problem does not seem to follow a set pattern, loading the grid in twice may not result in the issue, but 3 times will. Load the grid a fourth time and the problem is gone again.

I have managed to put a bandaid on the problem by invoking Ext.destroy() on the grid panel object, but this does not seem ideal. Should I have to be manually destroying components myself in this type of environment?

11 Apr 2011, 6:17 AM
I think dynamically 'injecting' Ext components/script (with 'scripts: true' in a panel's config) is generally frowned upon (someone please chime in, if you feel otherwise) and this may (or may not) be related to your problem.

I'm guessing that the problem might be related to a couple of other things, though it's hard to say without seeing code:

1.) How you're hiding/destroying a grid when it's 'closed'.
2.) The use of non-unique IDs on one or more of your grids.

11 Apr 2011, 6:47 AM
Just to clarify, the html and javascript being dynamically inserted via ajax is not being injected an Ext panel, it is just a straight <div> container element. Not sure if that makes a difference or not.

1.) How you're hiding/destroying a grid when it's 'closed'.
The grids were never explicitly hidden or destroyed. When new page html/script is loaded into the content element it simply is just replacing whatever is currently contained within that element.

2.) The use of non-unique IDs on one or more of your grids.
I am setting the "id" property of the grids myself, they are not auto-generated by Ext. So if I have a content page with a grid ID'ed as "users", and that page is reloaded, a new grid is created with the id "users" and replaces the grid that was currently there.

11 Apr 2011, 7:13 AM
Just an update on this, it appears upon initial testing that the fact I was manually assigning the "id" property and was creating new grids with this same id was the issue. Once I removed the id property from my grid declarations the issues have not appeared.