Erste Schritte mit 4D Ajax Framework

Eigene HTML Seite - Teil 2

Bitte betrachten Sie zuerst das Video (4,5 MB)

Im zweiten Teil ergänzen wir unsere Seite. Bei einem Klick auf Kunden wollen wir - in der gleichen Seite - in einer zweiten Listbox alle Rechnungen des Kunden anzeigen, ähnlich wie in einem Unterformular in 4D. Dazu benötigen wir natürlich einen zweiten DIV als Container, den wir unter den ersten setzen:

<div id="invoicegrid" style="display: none; width: 750px; height: 200px; border: 1px solid #CCCCCC;"></div>

Klickt man auf einen Kunden, bzw. auf eine Zeile eines Data Grids, wird die Funktion onDataRowClick aufgerufen. In dieser können wir anhand der Zeilennummer alle Rechnungen des Kunden suchen. Als optischen Gag wollen wir den Bereich Rechnungen erst anzeigen, wenn eine Kundenzeile angeklickt wird, benötigen dazu also auch eine Variable, wir nennen sie "Rech_FirstTime" und führen die von Kunden schon bekannte Initialisierung erst beim Klick durch. Fügen Sie direkt als erste Zeile nach onAfterInit ein:

var Rech_FirstTime = true;

direkt nach myDataGrid = new dax_dataGrid('Customers', $('maingriddiv')) die Zeilen:

myDataGrid.onDataRowClick = function(row, recordId) {
if (Rech_FirstTime) {
	Rech_FirstTime = false;
	$('invoicegrid').style.display = 'block';
	myInvoiceGrid = new dax_dataGrid('Invoices', $('invoicegrid'));
	myInvoiceGrid.go();
	}
var CompanyName = myDataGrid.getCellValue(row, 2);
myInvoiceGrid.newQuery();
myInvoiceGrid.addQuery('To_Company', '=', CompanyName);
myInvoiceGrid.runQuery();
}

Beim ersten Klick wird, wie schon von Kunden bekannt, der DIV Container sichtbar gemacht, ein neues Data Grid für 'Invoices' angelegt und in den DIV Container 'invoicegrid' gesetzt. Neu ist der darunterstehende Teil, hier wird eine Suche ausgeführt. Der Parameter "row" enthält die angeklickte Zeilennumer, die wir im Befehl getCellValue nutzen können, um den Firmennamen abzufragen, den wir einer Variablen zuweisen. Für das Data Grid Objekt zur Anzeige der Rechnungen wird mit newQuery eine neue Suche initialisiert. Dann eine Suchzeile angefügt, wir suchen im Feld "To_Company" nach dem Firmennamen, abschließend führen wir die Suche aus. Als Ergebnis zeigt das DataGrid alle Rechnungen der angeklickten Firma an.

Speichern Sie die Seite ab und probieren sie aus! Wir haben eigentlich schon unser Ziel erriecht, aber etwas Fine tuning schadet nicht, wir könnten den Firmennamen und die Mehrwertsteuer ausblenden und die Spaltengrößen optimieren. Nach Go einfügen:

myInvoiceGrid.hideColumn(2);
myInvoiceGrid.hideColumn(6);
myInvoiceGrid.setColumnWidth(1,100);
myInvoiceGrid.setColumnWidth(4,120);
myInvoiceGrid.setColumnWidth(5,120);

Vielleicht noch die Bereite des DIV selbst auf 463 anpassen:

<div id="invoicegrid"  style="display: none; width: 463px; height: 200px; border: 1px solid #CCCCCC;"></div>

und wir sind schon fertig. Abschließend noch die vollständige Seite (Download):

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4D Ajax Framework v11.1</title>

<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="dax/dev/callbacks.js"></script>
<script language="javascript" type="text/javascript" charset="utf-8" src="dax/js/localization/resources_en.js"></script>
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="dax/js/compile.js"></script>

<!-- stylesheets -->
<link rel="stylesheet" charset="ISO-8859-1" href="dax/themes/basic/basic_gz.css" media="all" type="text/css" title="XPress"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/vista/vista_gz.css" media="all" type="text/css" title="Vista"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/osx/osx_gz.css" media="all" type="text/css" title="Mack Daddy"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/leopard/leopard_gz.css" media="all" type="text/css" title="Leopard"/>
<link rel="stylesheet" charset="ISO-8859-1" href="dax/themes/dash/dash.css" media="all" type="text/css"/>
<link rel="stylesheet" charset="ISO-8859-1" href="dax/dev/custom.css" media="all" type="text/css"/>
<script type="text/javascript">
<!--

onAfterInit = function() {
var Rech_FirstTime = true;
$('customergrid').style.display = 'block';
myDataGrid = new dax_dataGrid('Customers', $('customergrid'));

myDataGrid.onDataRowClick = function(row, recordId) {
if (Rech_FirstTime) {
	Rech_FirstTime = false;
	$('invoicegrid').style.display = 'block';
	myInvoiceGrid = new dax_dataGrid('Invoices', $('invoicegrid'));
	myInvoiceGrid.go();
	myInvoiceGrid.hideColumn(2);
	myInvoiceGrid.hideColumn(6);
	myInvoiceGrid.setColumnWidth(1,100);
	myInvoiceGrid.setColumnWidth(4,120);
	myInvoiceGrid.setColumnWidth(5,120);
	}
var CompanyName = myDataGrid.getCellValue(row, 2);
myInvoiceGrid.newQuery();
myInvoiceGrid.addQuery('To_Company', '=', CompanyName);
myInvoiceGrid.runQuery();
}
myDataGrid.go();
myDataGrid.setColumnWidth(4,80);
myDataGrid.hideColumn(1);
myDataGrid.showToolbar(['search']);
}

// -->
</script>

</head>

<body onload="Login('Designer', ''); return false;">	
<div id="customergrid" style="display: none; width: 750px; height: 300px; border: 1px solid #CCCCCC;"></div>
<div id="invoicegrid"  style="display: none; width: 463px; height: 200px; border: 1px solid #CCCCCC;"></div>
</body>
</html>

Videofilm nochmal betrachten (4,5 MB)