EXTJS grid rendering - django

Question

I'm having difficulty rendering my EXTJS grid that rides on top of a django app. The grid is only displayed some of the time. When the grid is supposed to be displayed it works. When the grid is not supposed to be displayed I get a "ct is not defined" error from extjs-core. I researched this error and it seems it occurs when my <div id="my-grid"> is not defined. The div is defined inside a grid.html that is only loaded some of the time.
These are my files.
view_main.js - I define all of my objects here inside Ext.onReady.
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
border: false,
//...
}
grid.render('my-grid') // comment this out and "ct is not defined" goes away
// but the grid never renders in grid.html
base.html - my base django file that my templates extend. This file also loads my view_main.js file.
<!-- Load Script -->
<script type="text/javascript" src="/site_media/js/view_main.js" ></script>
grid.html - the grid html file that gets rendered inside an EXTJS TabPanel.
<div id="my-grid" style="border: height: 800px; width: 800px;"></div>
I don't want to even attempt to render my grid unless grid.html is being displayed. But the grid doesn't work unless I put grid.render inside of view_main.js
If I try to put the render script inside grid.html the I get "grid is not defined error"
<script type="text/javascript" >
Ext.onReady(function(){
grid.render('my-grid');
}
</script>
How can I only render the grid when grid.html is loaded?

Answer 1

If you're just trying to avoid that error, try checking for the existence of 'my-grid',
Ext.onReady(function() {
if( (Ext.get('my-grid')) !== null)
{
grid.render('my-grid');
}
});