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:

So, ich habe mich mittlerweile an der Datenbankanbindung gearbeitet. Da ich bereits bei der Übung DKE mit einer OracleDB gearbeitet habe, habe ich mich dafür entschlossen hier die für das Ajax-Projekt benötigten Datensätze in einer lokal installierten Oracle Datenbank zu verwalten.

Hierzu hat sich die Oracle Database 10g Express Edition empfohlen, da die Standardversion viel zu umfangreich für eine lokale Installation wäre. Als Schnittstelle wird JDBC dienen. Mit dem DB-Manager von myEclipse kam es dabei zu einem speziellen ORA Fehler mit folgendem Anbindungsstring: jdbc:oracle:thin:@localhost:1521:XE (*User+PW)

Da dieser Fehler jedoch ausschließlich im myEclipse DB Browser auftritt handelt es sich offenbar um einen Fehler von myEclipse. Dies ist aber nicht so schlimm, da eine Verbindung mit anderen Tools wie dem SQL-Exploerer oder dem SQL-Developer kein Problem darstellt.

Als nächstes gilt es von der Datenbankseite her eine Möglichkeit zu finden eine hinreichend große Menge an Aktiendatensätzen (vor allem Namen) in die Datenbank einzubinden, damit z.b. bei einr eingabe von 2 beliebigen Buchstaben nach Möglichkeit zumindest 1 oder 2 Aktiensätze überbleiben, die dann via AJAX sofort angezeitg werden können.

ExtJs Einbindungsprobleme

Heute habe ich wieder versucht weiterzumachen
und die schöne ExtJs Tabelle auf unserer jsp-Seite
in die Tat umzusetzten. Bin dabei streng nach
Tutorials vorgegangen, nur scheint die Anbindung
der ExtJs Bilbliothek nicht ganz zu funktionieren,
weil mir im Browser zur Zeit nur der Inhalt des
headers der jsp angezeigt wird. 

Habe schon ziemlich viele Pfadangaben probiert und 
Ordner mit den Js-Files in viele verschiedene Pfade
verschoben.

Hoffentlich gelingt mir bald einmal die
Bibliothekseinbindung damit ich den Code
endlich mal werkeln sehe.

Jetzt habe ich gerade die MyEclipse 6.0 Version installiert, wie ich es mir gestern mit Martin ausgemacht habe, um eine gemeinsame, sichere Arbeitsbasis herzustellen.

Dann habe ich mir den Code-Ansazt von Martin näher durchgesehen. D. h. ich habe den integrierten Tomcat Server gestartet, das ganze Projekt über 
MyEclipse  auf dem Server deployt, was auch gleich beim ersten Verusch geklappt hat.

Nun habe ich mir mit Martin ausgemacht, dass ich mich auf ein Spezifikum des ExtJs Frameworks, nämlich die Darstellung in einer anschaulichen, in vielen erdenklichen Richtungen
veränderbare Tabelle.

Martin wird demnächst eine Lösung zur Datenbankanbindungsfrage bringen, damit wir dann auch zum Kern dieses KTs, der Ajax-Technologie, umgesetzt in ExtJs, nachgehen können.