Von jQuery nach ExtJS

prayerslayer

Oar. Mh.

Registered: Sep 2004
Location: vorm Sucher
Posts: 4073

30.11.2010 - 22:04

Ja, hallo, ich wieder.

Ich arbeit für die TU Dresden an einer Art Datenvisualisierungs-Mashup. Wie ihr sicher der URL entnommen habt, läuft es mit jQuery. Außerdem mit Google Visualization API und dhtmlx-gantt.

So weit, so gut. Nicht!

Ich hätt gern eine ordentliche Window-Funktionalität, damit man die Charts und Tabellen verschieben, resizen und das alles machen kann. jQuery scheint den Inhalt der divs aber nicht vollständig zu kapseln, was dazu führt, dass zB nach simplen Anweisungen wie .draggable() das Gantt-Chart verrückt spielt. Versucht mal runterzuscrollen. Das Org-Chart links oben ist eine andere Geschichte, wo ich wohl auf dhtmlx-tree umsteigen würde.

ODER eben einen kompletten Rewrite mit ExtJS mache. Falls bis hierhin keiner einen besseren Vorschlag hat, bitte weiterlesen.

Jetzt komme ich zum eigentlichen Problem, nämlich meine XML Struktur einlesen. Mit jQuery hatte ich einen simplen AJAX-Request, der mir die Data.xml in ein DOM-Objekt gelesen hat. Im Prinzip würde mir sowas auch wieder reichen, dann müsst ich nicht alles komplett neu schreiben. Wenn ihr wisst wie, bitte antworten. Ansonsten weiterlesen. In ExtJS gibt es diesen XmlStore, den ich ehrlich gesagt noch nicht ganz durchblickt habe. Scheint eine XML Datei in eine große Tabelle zu überführen. Jedenfalls hab ich nur supersimple Tutorials dafür gefunden und nicht mal die versteh ich vollständig. Wenn mir wer sachdienliche Hinweise geben könnte, wie ich mein XML Schema[1][2] einlesen kann, wäre ich sehr dankbar.

tia

[1] XSD: http://nikolaus-piccolotto.info/treemap/jquery/DTD.xsd
[2] File: http://nikolaus-piccolotto.info/treemap/jquery/Data.xml

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

01.12.2010 - 02:00

Kannst du Screenshots oder Mockups machen wie's sein soll und wie's is bzw. was du als falsch ansiehst, weil bei mir spielt die ganze Seite sowieso verrückt nicht nur das Gantt.

So dass ich eher glaube du hast eher Probleme mit dem Box-Model als mit der verwendeten Lib

prayerslayer

Oar. Mh.

Registered: Sep 2004
Location: vorm Sucher
Posts: 4073

01.12.2010 - 10:31

Hmm welchen Browser hast du? Mit Chrome 7 und Opera 10.63 gehts bis aufs beben beschriebene. Und was genau ist "verrückt spielen"?

Kleiner gemacht und gescreenshotted:

Mockup ohne Gantt Chart:

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

01.12.2010 - 13:10

Ich darf dich erinnern dass eben du

Zitat
was dazu führt, dass zB nach simplen Anweisungen wie .draggable() das Gantt-Chart verrückt spielt.

geschrieben hast

Bei mir im Chrome/FF siehts ähnlich aus. Wobei du auch bei deinem SS sehen kannst dass das Problem nicht auf das Gantt beschränkt ist, sondern alle Diagramme ihre Box überfüllen.

Wie gesagt, ich glaube eher dass das Problem das Box Model bzw. CSS ist und nicht die Library. Das sind entweder Floats (Da sollten keine Floats sein!) oder du hast kein Overflow gesetzt, ich mein schau dir das Strukturdiagramm an...

PS: Im firefox geht die Treemap nicht, liegt aber viell. am AdBlock+ Oder NoScript

prayerslayer

Oar. Mh.

Registered: Sep 2004
Location: vorm Sucher
Posts: 4073

01.12.2010 - 19:08

Ja okay, war vielleicht ein bisschen übertrieben

Bei mir Chrome ist nur das Strukturdiagramm zu groß. Ich hab auch grad an mehreren Stellen ein overflow:"scroll" gesetzt, aber no use. Und beim Gantt ist das Problem, dass es an der Maus hängen bleibt. Floats hab zumindest ich nirgends verwendet. Das Problem ist eher, dass das Google Chart (Struktur) auf die Größe seines div-Containers sch...t und sich so breit zeichnet, wie es will. Und meine Hoffnung ist, dass ich das in einem ExtJS Window besser kontrollieren kann.

Jetzt mal davon abgesehen, gibt es ein ausführliches Tutorial für XmlStore/XmlReader und Konsorten?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

02.12.2010 - 00:49

Ich würd das mit dem ExtJS vorher probieren bevor du da irgendwas umbaust.

Was ich noch gesehen hab is position:relative, damit wirds nicht gscheit gehen, du brauchst fast sicher position:absolute

overflow:auto sollte reichen und wenn du das moving mit .draggable() nicht hinkriegst is das ein 5-Zeiler, würde aber einfach schätzen dass du einen handle oder so definieren musst an dem du ziehen kannst, weil so wie das jetzt is moved das teil wenn man am scrollbalken zieht und das is wohl nicht der sinn der sache

prayerslayer Oar. Mh. Registered: Sep 2004 Location: vorm Sucher Posts: 4073	30.11.2010 - 22:04 Ja, hallo, ich wieder. Ich arbeit für die TU Dresden an einer Art Datenvisualisierungs-Mashup. Wie ihr sicher der URL entnommen habt, läuft es mit jQuery. Außerdem mit Google Visualization API und dhtmlx-gantt. So weit, so gut. Nicht! Ich hätt gern eine ordentliche Window-Funktionalität, damit man die Charts und Tabellen verschieben, resizen und das alles machen kann. jQuery scheint den Inhalt der divs aber nicht vollständig zu kapseln, was dazu führt, dass zB nach simplen Anweisungen wie .draggable() das Gantt-Chart verrückt spielt. Versucht mal runterzuscrollen. Das Org-Chart links oben ist eine andere Geschichte, wo ich wohl auf dhtmlx-tree umsteigen würde. ODER eben einen kompletten Rewrite mit ExtJS mache. Falls bis hierhin keiner einen besseren Vorschlag hat, bitte weiterlesen. Jetzt komme ich zum eigentlichen Problem, nämlich meine XML Struktur einlesen. Mit jQuery hatte ich einen simplen AJAX-Request, der mir die Data.xml in ein DOM-Objekt gelesen hat. Im Prinzip würde mir sowas auch wieder reichen, dann müsst ich nicht alles komplett neu schreiben. Wenn ihr wisst wie, bitte antworten. Ansonsten weiterlesen. In ExtJS gibt es diesen XmlStore, den ich ehrlich gesagt noch nicht ganz durchblickt habe. Scheint eine XML Datei in eine große Tabelle zu überführen. Jedenfalls hab ich nur supersimple Tutorials dafür gefunden und nicht mal die versteh ich vollständig. Wenn mir wer sachdienliche Hinweise geben könnte, wie ich mein XML Schema[1][2] einlesen kann, wäre ich sehr dankbar. tia [1] XSD: http://nikolaus-piccolotto.info/treemap/jquery/DTD.xsd [2] File: http://nikolaus-piccolotto.info/treemap/jquery/Data.xml
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	01.12.2010 - 02:00 Kannst du Screenshots oder Mockups machen wie's sein soll und wie's is bzw. was du als falsch ansiehst, weil bei mir spielt die ganze Seite sowieso verrückt nicht nur das Gantt. So dass ich eher glaube du hast eher Probleme mit dem Box-Model als mit der verwendeten Lib
prayerslayer Oar. Mh. Registered: Sep 2004 Location: vorm Sucher Posts: 4073	01.12.2010 - 10:31 Hmm welchen Browser hast du? Mit Chrome 7 und Opera 10.63 gehts bis aufs beben beschriebene. Und was genau ist "verrückt spielen"? Kleiner gemacht und gescreenshotted: Mockup ohne Gantt Chart:
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	01.12.2010 - 13:10 Ich darf dich erinnern dass eben du Zitat was dazu führt, dass zB nach simplen Anweisungen wie .draggable() das Gantt-Chart verrückt spielt. geschrieben hast Bei mir im Chrome/FF siehts ähnlich aus. Wobei du auch bei deinem SS sehen kannst dass das Problem nicht auf das Gantt beschränkt ist, sondern alle Diagramme ihre Box überfüllen. Wie gesagt, ich glaube eher dass das Problem das Box Model bzw. CSS ist und nicht die Library. Das sind entweder Floats (Da sollten keine Floats sein!) oder du hast kein Overflow gesetzt, ich mein schau dir das Strukturdiagramm an... PS: Im firefox geht die Treemap nicht, liegt aber viell. am AdBlock+ Oder NoScript
prayerslayer Oar. Mh. Registered: Sep 2004 Location: vorm Sucher Posts: 4073	01.12.2010 - 19:08 Ja okay, war vielleicht ein bisschen übertrieben Bei mir Chrome ist nur das Strukturdiagramm zu groß. Ich hab auch grad an mehreren Stellen ein overflow:"scroll" gesetzt, aber no use. Und beim Gantt ist das Problem, dass es an der Maus hängen bleibt. Floats hab zumindest ich nirgends verwendet. Das Problem ist eher, dass das Google Chart (Struktur) auf die Größe seines div-Containers sch...t und sich so breit zeichnet, wie es will. Und meine Hoffnung ist, dass ich das in einem ExtJS Window besser kontrollieren kann. Jetzt mal davon abgesehen, gibt es ein ausführliches Tutorial für XmlStore/XmlReader und Konsorten?
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	02.12.2010 - 00:49 Ich würd das mit dem ExtJS vorher probieren bevor du da irgendwas umbaust. Was ich noch gesehen hab is position:relative, damit wirds nicht gscheit gehen, du brauchst fast sicher position:absolute overflow:auto sollte reichen und wenn du das moving mit .draggable() nicht hinkriegst is das ein 5-Zeiler, würde aber einfach schätzen dass du einen handle oder so definieren musst an dem du ziehen kannst, weil so wie das jetzt is moved das teil wenn man am scrollbalken zieht und das is wohl nicht der sinn der sache

Von jQuery nach ExtJS

Forum Index > Software > Coding Stuff

prayerslayer

watchout

prayerslayer

watchout

prayerslayer

watchout