How to use EXTJS in a django app?

I have an django-driven web app that displays ExtJS components. I want to show or hide an ExtJS panel based on some django template logic. This isn't working and I can't figure out how to do this.

Here's what I tried (Letter map to code below): A. I tried to put template logic in my js file. Big fail... This pretty much corrupted my js.

B. I tried to build the extjs gui then hide the panel. I either get a null or undefined error based depending on the method I tried. I suspect a sequence problem here, but I don't know how to confirm that.

What is the proper way to hide/unhide an EXTJS component based on django template logic? How can I make this work?

Below is my code snippets:

--------------------------
//////////Javascript Start ///////////// 
   //A. Tried to wrap with {% if X %}
   var myPanel= {
      xtype : 'panel',
      title : 'My Panel',
      id : 'myPanel',
      height : 100,
      width : 100,
      hideable: true,
      html : 'Hello!'
    }
///////////Javascript End////////////

<html>
<head>
   <!-- references above javascript -->
   <script type="text/javascript" src="myfile.js" ></script>
</head>
<body>
... body stuff...    

 <script type="text/javascript">
   <!--  B Tried to a map an EXTJS hide statement with django -->
   {% if X %}
     Ext.get('myPanel').hide();  // Null Error
     Ext.getCmp('myPanel').hide(); // Undefined Error
     Ext.getCmp("myPanel").hide(); // Undefined Error
   {% endif %}
  </script> 
</body>
</html>

Answers


Issue #1 - You're not rendering your panel in the first place, you're just creating a Javascript object.

Issue #2 - You're not delaying your javascript execution until the DOM is ready, so when you fix #1, you're still going to error out.

Try adding a <div id="panel-container"></div> to your body content, wherever you want the panel rendered. Then, do something like this in your javascript file:

//create a global namespace for stuff that exists in your application.
Ext.ns('YourAppName'); 

//run this code once the DOM is loaded:
Ext.onReady(function(){  // run this function once the DOM is loaded, not before!
    YourAppName.myPanel= new Ext.Panel({
        title : 'My Panel',
        id : 'myPanel',
        height : 100,
        width : 100,
        hideable: true,
        html : 'Hello!',
        renderTo:'panel-container'  // Tells the panel where it ought to appear in the DOM
    });
});

Then, in your document, leverage Ext.onReady again:

{% if X %}
<script type="text/javascript">
Ext.onReady(function(){
    YourAppName.myPanel.hide();
});    
</script>
{% endif %}

Need Your Help

Best way of verifying exceptions thrown in JUnit tests

java unit-testing exception junit mockito

I'm writing a JUnit/Mockito test where an exception is expected to be thrown. Of course I can just do this:

How to get node-neo4j return nodes with data only

node.js neo4j node-neo4j

I am using node-neo4j for connecting to neo4j graph database.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.