2011-04-07 5 views
0

Je réalise un projet simple ciblant le dessin graphique en ligne. J'utilise la bibliothèque Flot/JQuery pour dessiner des graphiques, en utilisant ExtJs pour la mise en page.JQuery + ExtJS: comment traiter un composant DIV en utilisant ces deux bibliothèques

Ce que j'essaie de faire est la suivante: 1. définir une DIV 2. A l'aide des fonctions Flot pour tracer des graphes dans ce DIV 3. Mettre DIV dans un panneau défini par le code ExtJs

ma question est:

comment contrôler la séquence que le premier appel Flot fonctionne pour dessiner dans DIV, puis de mettre cette DIV avec des graphiques dans le panneau par ExtJS?

Maintenant, le DIV et les graphiques ne peuvent pas être affichés sur la page.

toute

+0

Extjs 4 fait des graphiques, n'est-ce pas? – Ben

+0

oui. mais je viens de trouver que Flot a toutes les fonctionnalités que je veux, je ne suis pas sûr si le graphique ExtJs peut faire le même travail. – Simon

+0

Je _think_ extjs 4 utilise raphael pour la cartographie, vous devriez être capable de faire beaucoup de choses avec ça .. – Ben

Répondre

2

1 et 3 peut être accompli en utilisant Ext.Panel#html

2 est une question d'ajouter le graphique code de rendu à l'événement afterlayout.

+0

Je ne sais rien sur ExtJS, mais le seul gotcha avec flot est que le div doit avoir une largeur/hauteur, rendue plus probable en l'attachant au DOM et visible. – Ryley

+0

Bon point, la div du panneau pourrait avoir zéro largeur/hauteur pour une variété de raisons. Vous pouvez soit trouver les moyens qui peuvent arriver et écouter ces événements ext, ou (je suis sûr que) flot jette une erreur quand il essaie de rendre dans un élément largeur/hauteur zéro. Peut-être définir un délai d'attente pour essayer de comploter à nouveau dans 500ms ou un tel? – wombleton

+0

J'ai utilisé firebug pour voir le html de sortie généré par le code ExtJS. J'ai découvert que je peux utiliser la partie «corps» de chaque panneau comme l'espace pour le traçage, car il a la largeur et la hauteur. par exemple, j'ai défini un panneau nommé "pn1", je peux voir le div associé "id = pn1". appartient à ce nœud DIV, dans le nœud le plus profond il y a un ChildDIV avec la classe "class = x-panel-body", cependant son ID "ext-gen-20" est généré dynamiquement par ExtJS. Donc, dans cette situation, puis-je utiliser le type de classe "X-panel-body" et utiliser le div "pn1" parent ensemble pour exécuter la requête et enfin avoir accès à ce corps DIV "ext-gen-20"? – Simon

Questions connexes