EXTJS grid rendering

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.开发者_Go百科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?

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');
    }
});