Как использовать EXTJS в приложении Django? - PullRequest
Новая
       3

Как использовать EXTJS в приложении Django?

0 голосов
/ 04 декабря 2010

У меня есть веб-приложение на основе django, которое отображает компоненты ExtJS. Я хочу показать или скрыть панель ExtJS, основанную на некоторой логике шаблона django. Это не работает, и я не могу понять, как это сделать.

Вот что я попробовал (нанесите карту на код ниже): A. Я попытался поместить логику шаблона в мой файл js. Большой провал ... Это в значительной степени испортило мой JS.

B. Я попытался создать графический интерфейс extjs, а затем скрыть панель. Я получаю нулевую или неопределенную ошибку в зависимости от метода, который я пробовал. Я подозреваю, что здесь есть проблема с последовательностью, но я не знаю, как это подтвердить.

Как правильно скрыть / показать компонент EXTJS на основе логики шаблона django? Как я могу сделать эту работу?

Ниже приведены мои фрагменты кода: 

--------------------------
//////////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 голос
/ 04 декабря 2010

Проблема № 1 - вы не визуализируете панель в первую очередь, вы просто создаете объект Javascript.

Проблема № 2 - вы не откладываете выполнение javascript до тех пор, пока DOM не будет готов, поэтому, когда вы исправите # 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 %}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...