Comment utiliser EXTJS dans une application django?

J'ai une application Web dirigée par django qui affiche les composants ExtJS. Je veux afficher ou masquer un panneau ExtJS basé sur une logique de modèle de django. Cela ne fonctionne pas et je ne peux pas comprendre comment faire cela.Comment utiliser EXTJS dans une application django?

Voici ce que j'ai essayé (Lettre de correspondance au code ci-dessous): A. J'ai essayé de mettre la logique de modèle dans mon fichier js. Gros échec ... C'est à peu près mes js corrompus.

B. J'ai essayé de construire le gui extjs puis masquer le panneau. Je reçois une erreur nulle ou non définie en fonction de la méthode que j'ai essayé. Je suspecte un problème de séquence ici, mais je ne sais pas comment le confirmer.

Quelle est la bonne façon de masquer/afficher un composant EXTJS basé sur la logique du modèle django? Comment puis-je faire ce travail?

Ci-dessous mon extraits de code:

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

Source

2010-12-04 codingJoe

S'il vous plaît utiliser l'option '101010' dans l'éditeur d'afficher le code, ce n'est pas lisible dans le format actuel. –

Issue # 1 - Vous n'êtes pas le rendu de votre panneau, en premier lieu, vous êtes juste créer un objet Javascript.

Problème n ° 2 - Vous ne retardez pas l'exécution de votre javascript tant que le DOM n'est pas prêt. Par conséquent, lorsque vous corrigez le n ° 1, vous continuez à effectuer une erreur. Essayez d'ajouter un <div id="panel-container"></div> au contenu de votre corps, où que vous vouliez rendre le panneau. Ensuite, faire quelque chose comme ceci dans votre fichier 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 
    }); 
});

Ensuite, dans votre document, l'effet de levier Ext.onReady nouveau:

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

Source

2010-12-04 18:48:34 timdev

Cela a beaucoup plus de sens. Alors j'ai essayé et j'ai une erreur "YourAppName.myPanel.hide n'est pas une fonction" Comment savoir si la fonction est définie avant d'être appelée? – codingJoe

Eh bien, mon code manque de quelque chose d'évident - il ne crée jamais réellement le panneau. Voir ma modification dans une minute. – timdev

J'ai édité ma réponse pour être correcte. Un autre problème que vous aviez est que vous n'instanciez pas un panneau n'importe où - votre code original définit simplement un objet simple avec des valeurs de configuration. Vous incluez un xtype, mais cela ne provoquera rien si vous ne chargez pas cet objet de configuration dans un composant ExtJS. J'ai changé ma réponse pour illustrer directement la création d'un panel. – timdev

Comment utiliser EXTJS dans une application django?

Répondre

Questions connexes