Data Grid Part I
I found myself unexpectedly dropped into the deep end of ext development when I needed to update a three-year-old site I had built with the MODx CMS/CMF precursor Etomite. Since this site needed features not available in a stock Etomite, I used the then-extension mods to Etomite known as MODx2. I also used a modification of the default Etomite site template, which was table-based. The site had since been updated to MODx 0.9.2, but the design stayed the same.
This time around, the site needed a whole new look, so after updating to the latest version of MODx I created a fairly simple CSS based template that would not break the existing content and menu structure. That part, this being MODx, was easy. Just copy/paste the HTML source from a page I already had that I liked, add the MODx tags, and tweak the CSS a bit.
The Application
The interesting part comes from a custom application I had built for the site's clients to be able to log in and view data pertinent to them from the database. It's easy enough to use the basic WebLogin snippet script to send the user to the page containing the data grid using its login page option. Then the user was given a menu bar, with "Browse", "Search", and "Logout" buttons. This was a simple PHP application that would use the user's login name to select that user's data from the table and display it in a basic table. No sorting, no paging, and the whole page refreshing on every submission.
I decided to rewrite the whole thing using an extjx sortable paging grid.
The Template
I created a new template to use for this page, since it would need a load of script tags to include all of the library and css files, plus I wanted a full-page layout for the data grid, as well as a minimal masthead; basically just a nice background image for the form that contains the logout button and the user's name.
<!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>
<title>sottwell archive » Data Grid</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<base href="http://sottwell.pogwatch.com/"></base>
<link rel="stylesheet" type="text/css" href="assets/templates/trans/client.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="assets/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="assets/js/extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="assets/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="assets/js/grid-paging.js"></script>
</head>
<body>
<div id="maindiv">
Content goes here
</div>
</body>
</html>
The Document
The business end of the application is contained in the Dataview document. So I edited the document I was originally using.
<form id="clientForm" name="clientform" action="datagrid-1.html" method="post">
<fieldset id="clientSet">
<label id="clientLogoutLabel" for="clientLogout">
<input id="clientLogout" class="button" type='submit' name='logout' value='' />
<span id="clientName"></span>
</label>
</fieldset>
</form>
<div id="grid-paging" style="margin:20px auto; border:1px solid #99bbe8; overflow:hidden; width:980px; height:450px;"></div>
The Snippet
The snippet is critical to the function of the application, since we need to be able to specify the user whose data we want to retrieve for the grid. Also since this is a multilanguage site, and this page is used for all users, it needs to know which language's home page to send the user back to and which language file to include.
For the snippet itself, I included an external .php file.
define("IN_DATABASE", "true");
if(is_file("assets/snippets/database/data.php")) {
include "assets/snippets/database/data.php";
}
return '';
And the actual work is done in the external .php file.
<?php
// make sure nobody tries to access this directly
if(IN_DATABASE !="true") die('<h1 style="color:red;">Illegal File Access</h1>');
// get the user's language from the cookie
$lang = is_numeric($_COOKIE['Language']) ? $_COOKIE['Language'] : $modx->config['site_start'];
// load the language page
include "assets/snippets/database/langs/$lang.php";
// set up the label for the logout button
$modx->setPlaceholder('logout', $_client['logout']);
// set the client name for display and for the AJAX query string
$modx->setPlaceholder('clientname', $_SESSION['webShortname']);
// process logout
if(isset($_POST['logout'])) {
// redirect to home page
$url = $modx->makeURL($lang);
$modx->sendRedirect($url);
}
?>
