Ext-js Grids

Gestern habe ich wieder eineige Zeit damit verbracht die Daten nach Möglichkeit dynamisch in das Ext-Grid eizuspeisen. Dabei ist an sich folgende Eingabesyntax notwendig:


Ext.grid.dummyData = [

['Altenberg bei Linz','Urfahr-Umgebung',3739,'Marktgemeinde','www.altenberg.at', 'Stadt-Staat',14.35027, 48.37283],
....
];

Dies setzt voraus, dass die Tabelle in den vorrigen Codezeilen bereits korrekt deklariert wurde bzw. wird, was aber ohnehin schon der Fall ist. Daher funktioniert dieses statische Einfügen in die Tabelle auch ohne Probleme, will ich jedoch die Daten die von ajax via http.responseText als String (der bereits richtig mit eckigen Klammern usw. formatiert ist) einfügen "zerhackt" ajax diesen String nach jedem einzelnen Zeichen, was für die Tabelle natürlich nicht zielführend ist!

alle möglichen Änderungen bzw. eine explezite Deklaration als string halfen nicht.
Daher bin ich nach eingen recherchen auf die Idee gekommen den string quasi zu parsen und dann nach folgender weise in die tabelle einzufügen:

man splittet also das eingabearray etwa nach folgendem schema:

var string = http.ResponseText
var array = new Array();
array=string.split(",")

Das Array wird also quasi nach jedem Beistrich zerhackt, wobei der Beistrich entfernt wird und die anderen Daten in ein Array geschrieben werden!

nun funktioniert es tatsächlich die daten in das grid array folgendermaßen "dynamisch" einzuspeisen:

Ext.grid.dummyData = [

[array[0],array[1],array[2]......]
];

Dies hat lediglich den Nachteil, dass der Block in dem die Daten deklariert wrden keine Schleifen oder abfragen zulässt, dies wäre aber aufgrund der ja immer anderen länge des Array eig. erforderlich, vllt. findet sich hier noch ein lösung....

Einen Fehler der beim Absenden des ajax-requests passierte, konnte ich ebenfalls noch ausbessern, der befehl onKeyDown sendete nämlich die Information des Eingabefeldes bereits ab, bevor das neu eingegebene Zeichen im Formular war, dieses Problem lies sich mit onKeyUp lösen.

Generell haben mir hier die Informationen von w3c zur javaScript und html syntax geholfgen:
http://www.w3schools.com/jsref/jsref_split.asp und
http://www.javascriptkit.com/javatutors/string4.shtml

Generell muss ich noch anmerken, dass der FireBug "Debugger" (Firefox Plugin) bei der Entwicklung recht hilfreich ist, er macht z.B. auf syntaxfehler aufmerksam, meldet aber auch fehler bei ajax requests bzw. kann man wie bei einem richtigen Debugger auch Einsprungpunkte setzen und somit den Inhalt von gewissen Variablen zu gewissen Zeiten prüfen!

Letzte Schritte

Das Abfragen aus der Oracle DB funktioniert jetzt über einmaligen Verbindungsaufbau, so dass jetzt nicht mehr für jede Abfrage eine neue Verbindung zur DB aufgebaut werden muss. Das haben wir mittels einer Abfrage bewerkstelligt"
if (callCounter) {callCounter = false;data.makeConnection();
}", die nur bei noch nicht bestehender Verbindung eine neue erzeugt.

Heute haben wir uns via icq über die nächstanstehenden Arbeiten unterhalten und unsere Aufgabenbereiche dabei abgesteckt. So hat sich Martin für die Ausgabe in der Tabelle bereit erklärt. Hierzu müssen die Daten, die bei der Abfrage aus der DB zurückkommen noch geeignet in die Grid-Komponente/Tabelle eingefügt werden. 

Ich werde mich noch um optische Feinschliffe kümmern und so viel wie noch möglich das Erforschen bzw. Miteinbauen von ExtJs Spezialitäten in unsere schon bestehende Apllikation versuchen.

DB anbindung und datenausgabe klappt

In den letzten Tagen ist wieder einiges weitergegangen bei der Fertigstellung des kleinen Projektes. Es kam allerdings auch zu einigen Problemen, die ich zum großteil schon gelöst habe:

1.wenn die oracle10gExpress edition und apache tomcat gleichzeitig gestartet waren, kam es zu dem Problem, dass ich via localhost bzw. 127.0.0.1 nur mehr auf das webinterface der orable DB zugreifen konnte, nicht allerdings auf tomcat, da beide Anwendungen offenbar standardmäßig den zugriff auf ihr webinterface nur via 127.0.0.1 zulassen. Eine einfache Änderungsmöglichkeit bot sich nach kurzer Internetrecherche leider nicht.

Als Lösung reichte es jedoch lediglich den Standardport von 8080 auf 8090 zu ändern:

der Zugriff auf das OracleDB Interface erfolgt also nun via 127.0.0.1:8080

der Zugriff auf Tomcat Apache Tomcat via 127.0.0.1:8090

2. Damit nach der Eingabe von 2-3 zeichen zumindest in den meisten fällen auch noch genügend Daten vorhanden sind, die angezeigt werden können (d.h. die aus der gleichen Zeichenfolge bestehen wie die eingabe ins eingabefeld) ist es notwendig eine hinreichend große DB zu haben!

Da ich bei den Aktienkursen leider keine ausreichend große DB gefunden habe, habe ich mich für eine DB entschieden die alle oberösterreichischen Orte mit Namen und einigen zusatzdaten entält, da ich diese Liste noch aus schulzeiten zur verfügung hatte. (ca.450 Einträge)

3.Die Änderung der Liste sollte sofort erfolgen, also nach jeder einzelnen Tastatureingabe sollte die Liste der gefundenen Orte bereits aktualisiert werden. Dieses Verhalten konnten wir mit dem Befehl onKeyDown="updateOrtResults(0) erreichen!

derzeit noch offen sind folgende Probleme:

1. die ext-js tabelle wird nicht aktualisiert nach den eingaben, sprich die daten werden zwar via ajax "normal" d.h. außerhalb der tabelle angezeigt aber noch nicht in der tabelle - hier fehlt vermutlich noch eine art "update" methode, sowie eine direkte Einbindung in die Tabelle

2. die datenbankanbindung wird offenbar nach jeder einzelnen zeicheneingabe neu aufgebaut, dies führt nach mehreren dutzend eingaben zu einem anbindungsproblem, sollte aber lösbar sein

Umlaute werden außerdem noch falsch angezeigt->ändert sich ev. sowieso mit der Einbindung in die ext-js Tabelle!

tlw. scheinen dir orte außerdem noch nicht ganz richtig nach der eingabe auf: es scheint als ob etwas zu viele orte angzeigt werden- hier liegt ev. noch ein fehler im stringvergleich

hier noch ein screenshot, zur verdeutlichung wie das ganze dzt. ca aussieht: