如何在django应用程序中使用EXTJS？

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.

我有一个django驱动的Web应用程序，显示ExtJS组件。我想基于一些django模板逻辑显示或隐藏ExtJS面板。这不起作用，我无法弄清楚如何做到这一点。

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.

这是我尝试的（下面的代码信函图）：A。我试图将模板逻辑放在我的js文件中。大失败......这几乎毁了我的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.

B.我试图构建extjs gui然后隐藏面板。我要么根据我尝试的方法得到一个null或未定义的错误。我怀疑这里有序列问题，但我不知道如何确认。

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

基于django模板逻辑隐藏/取消隐藏EXTJS组件的正确方法是什么？我怎样才能做到这一点？

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>

1 个解决方案

#1

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

问题＃1 - 你不是首先渲染你的面板，你只是创建一个Javascript对象。

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.

问题＃2 - 在DOM准备就绪之前，你不会推迟你的javascript执行，因此当你修复＃1时，你仍然会出错。

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:

尝试将

添加到您的正文内容中，无论您希望面板呈现在何处。然后，在您的javascript文件中执行以下操作：

//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:

然后，在您的文档中，再次利用Ext.onReady：

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

#1