Die Flexperten Herrlich & Ramuschkat

CF8: CFGRID mit CFC-Binding, Paging und Tooltip pro Zeile

Wieder einmal bietet eine vorgegebene Komponente nicht die Funktionalität, die vom Kunden gewünscht wird. Im folgenden Fall sollte lediglich ein Tooltip pro Tabellenzeile in einer Auftragsübersicht angezeigt werden. Der Inhalt des Tooltips soll also eine Zusammenfassung der einzelnen Daten einer Zeile beim Überfahren mit der Maus anzeigen. Eine kurze Recherche und ein wenig tüfteln ergab dann den Vorschlag: wir tweaken uns einfach das cfgrid zurecht. Dank der von Coldfusion für verschiedene Komponenten verwendeten Javascript Bibliothek ExtJS gar kein Problem!

Zunächst mal das Grid:

<cfform>
<cfgrid
colHeaders="yes"
colHeaderAlign="center"
colHeaderBold="yes"
colHeaderFont="Arial"
colHeaderFontSize="18"
font="Arial"
format="html"
pagesize="20"
rowHeaders="no"
striperows="no"
selectColor="##b0b0b0"
selectmode="row"
selectOnLoad="false"
stripeRowColor="gray"
bind="cfc:components.auftraege.getAuftraegeOhneBearbeiter({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})">
<cfgridcolumn header="Auftrag" width="80" fontSize="14"/>
<cfgridcolumn header="Erfasst am" width="80"/>
<cfgridcolumn header="Inhalt" width="250"/>
<cfgridcolumn header="Status" width="100"/>
<cfgridcolumn header="Ersteller" width="120"/>
<cfgridcolumn header="Abteilung" width="70"/>
<cfgridcolumn header="Auftragsbeschreibung" display="no"/>
</cfgrid>
</cfform>

Nichts besonderes! Lediglich für das Binding muss eine entsprechende Komponente implementiert werden. Auf die eingebundene CFC brauche ich aber wohl nicht näher einzugehen, es handelt sich um eine Komponente, die Daten an das Grid ausliefert, wobei die Rückgabewerte mit der Funktion QueryConvertForGrid() für das Grid bereits angepasst wurden.

Nun zur cfm-Seite:
am Anfang der Seite definieren wir uns mit

<cfajaxproxy cfc="components.auftraege" jsclassname="jsobj" />

ein Proxy-Objekt für die Komponente, die uns die Daten liefert. Das kann dann im folgenden Javascript verwendet werden.
Dann braucht es noch vier kleine Javascript-Funktionen im Head-Bereich der Seite (die Quicktips binden wir gleich mit ein):

<script src="/CFIDE/scripts/ajax/ext/package/qtips/qtips.js"></script>
<script>
var cfcAsAjax = new jsobj();
var grid;

dataGridTest = function() {
Ext.QuickTips.init();
grid = ColdFusion.Grid.getGridObject('gridAuftraege');
grid.on('mouseover', mouseOver);
}

showTooltip = function(rowIndex) {
if(grid == null)
grid = ColdFusion.Grid.getGridObject('gridAuftraege');
var row = grid.dataSource.data.items[rowIndex].data;
var val = row.AUFTRAGSBESCHREIBUNG.replace(/[\n\r]/g,'<br />'); // Zeilenumbüche ersetzen
return val;
}

function mouseOver(e, t){
var overCell = grid.getView().findCellIndex(t);
var overRow = grid.getView().findRowIndex(t);
if(overCell !== false && overRow !== false) {
// ToDo: trackMouse funktioniert nicht
Ext.QuickTips.register({target:t,title:'Auftragsbeschreibung',text:showTooltip(overRow),showDelay:0,hideDelay:0,trackMouse:true,maxWidth:2000});
}
}

//basic error handler
errorHandler = function(statusCode, statusMsg) {
alert(statusCode + ': ' + statusMsg)
}
</script>

und ein

<cfset ajaxOnLoad("dataGridTest")>

zum Laden der Hauptfunktion beim ersten Anzeigen der Seite.

So sieht’s dann aus, wenn man alles entsprechend implementiert. Die versteckte Spalte “Auftragsbeschreibung” wird als Tooltip für jede Zeile inividiuell im Grid herangezogen.

Den Quellcode für das Beispiel werde ich in den nächsten Tagen noch nachliefern.

[Update]: Ich hab’ die Beispieldatei im txt-Format angehängt, das unser Block cfm-Dateien zur Anzeige nicht zuläßt. Die Datei muss also nach dem Runterladen noch umbenannt werden.

Datei: cfgrid_prototype.cfm

2 Kommentare

  1. Jimmy am 30. December 2010

    Can you please post the source code for your example?

    Thanks in advance!
    ———————————
    Kannst du bitte nach der Quellcode für Ihr Beispiel?

    Vielen Dank im Voraus!

  2. FSemrau am 21. January 2011

    sorry for being late…, I added the prototype source code file to this post as a text file, ’cause the blog does not allow embedding cfm files in posts. After the donwload you have to change the file extension back to .cfm.
    If you have any further questions feel free to ask.

    Frank

Einen Kommentar schreiben