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

【问题标题】：How to use EXTJS in a django app?如何在 django 应用程序中使用 EXTJS？
【发布时间】：2010-12-04 06:29:00
【问题描述】：

我有一个显示 ExtJS 组件的 django 驱动的网络应用程序。我想显示或隐藏基于一些 django 模板逻辑的 ExtJS 面板。这不起作用，我不知道该怎么做。

这是我尝试过的（字母映射到下面的代码）： A. 我试图将模板逻辑放在我的 js 文件中。大失败...这几乎破坏了我的 js。

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

基于 django 模板逻辑隐藏/取消隐藏 EXTJS 组件的正确方法是什么？我怎样才能使这项工作？

下面是我的代码sn-ps：

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

【问题讨论】：

请使用编辑器中的“101010”选项发布代码，当前格式不可读。

标签： javascript django extjs

【解决方案1】：

问题 #1 - 首先你没有渲染你的面板，你只是在创建一个 Javascript 对象。

问题 #2 - 在 DOM 准备好之前，您不会延迟 javascript 的执行，所以当您修复 #1 时，您仍然会出错。

尝试将<div id="panel-container"></div> 添加到您的正文内容中，无论您希望在何处呈现面板。然后，在您的 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
    });
});

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

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

【讨论】：

这更有意义。所以我试了一下，我收到一个错误“YourAppName.myPanel.hide is not a function”我怎么知道函数在被调用之前是否已经定义？
好吧，我的代码缺少一些明显的东西——它从来没有真正创建面板。一分钟后查看我的编辑。
我编辑我的答案是正确的。您遇到的另一个问题是您实际上并没有在任何地方实例化面板——您的原始代码只是定义了一个带有配置值的普通对象。您包含一个 xtype，但这不会导致任何事情发生，除非您将该配置对象提供给某个 ExtJS 组件。我已更改答案以说明直接创建面板。
谢谢！！这很有效，真的帮助我更好地理解了它是如何工作的。