Wie benutzt man EXTJS in einer Django App?

Ich habe eine Django-gesteuerte Web-App, die ExtJS-Komponenten anzeigt. Ich möchte ein ExtJS-Panel basierend auf einer Django-Template-Logik ein- oder ausblenden. Dies funktioniert nicht und ich kann nicht herausfinden, wie das geht.Wie benutzt man EXTJS in einer Django App?

Hier ist, was ich versucht habe (Buchstabe map, um unten zu codieren): A. Ich habe versucht, Vorlage Logik in meine js-Datei. Big fail ... Das hat meine js ziemlich korrumpiert.

B. Ich habe versucht, die extjs gui zu bauen und dann das Panel zu verstecken. Abhängig von der Methode, die ich versucht habe, erhalte ich entweder einen Null- oder undefinierten Fehler. Ich vermute hier ein Sequenzproblem, aber ich weiß nicht, wie ich das bestätigen soll.

Was ist der richtige Weg, um eine EXTJS-Komponente basierend auf der Django-Vorlagenlogik ein-/auszublenden? Wie kann ich das schaffen?

Unten ist mein Code-Schnipsel:

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

Quelle

2010-12-04 codingJoe

Bitte verwenden Sie '101010' Option im Editor den Code zu schreiben, es ist nicht im aktuellen Format lesbar. –

Ausgabe # 1 - Sie sind nicht Ihre Platte in erster Linie Rendering, sie ist nur ein Javascript-Objekt erstellen.

Problem # 2 - Sie verzögern Ihre JavaScript-Ausführung nicht, bis das DOM fertig ist. Wenn Sie also # 1 beheben, gehen Sie immer noch Fehler aus.

Versuchen Sie, eine <div id="panel-container"></div> zu Ihrem Körper Inhalt hinzuzufügen, wo immer Sie das Panel gerendert werden soll. Dann tun Sie etwas wie dies in Ihrer Javascript-Datei:

//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 
    }); 
});

Dann in Ihrem Dokument, Hebel Ext.onReady wieder:

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

Quelle

2010-12-04 18:48:34 timdev

Das macht viel mehr Sinn. Also habe ich es versucht und ich bekomme einen Fehler "YourAppName.myPanel.hide ist keine Funktion" Wie kann ich wissen, ob die Funktion definiert ist, bevor sie aufgerufen wird? – codingJoe

Nun, meinem Code fehlt etwas Offensichtliches - es schafft nie das Panel. Sehen Sie meine Bearbeitung in einer Minute. – timdev

Ich habe meine Antwort bearbeitet, um korrekt zu sein. Ein anderes Problem, das Sie hatten, ist, dass Sie ein Panel nicht irgendwo instanziiert haben - Ihr ursprünglicher Code definiert nur ein einfaches Objekt mit Konfigurationswerten. Sie fügen einen X-Typ ein, aber das führt nicht dazu, dass Sie das Konfigurationsobjekt in eine ExtJS-Komponente einspeisen. Ich habe meine Antwort geändert, um die Erstellung eines Panels direkt zu illustrieren. – timdev

Wie benutzt man EXTJS in einer Django App?

Antwort

Verwandte Themen