Phone Inventory

PHP/HTML Source:

<?php

require_once 'raxan/pdi/autostart.php'; 

class NewPage extends RaxanWebPage {

    protected $db, $selectedId = null;

    protected function _config() {
        $this->preserveFormContent = false;
    }
    
    protected function _load() {
        if ($this->isPostBack) $this->db = $this->data('inventory');
        else {
            $db = $this->Raxan->importCSV('data/phones.csv');
            $this->db = $this->data('inventory',$db);
            $this->rowClick(1);
        }

    }

    protected function _prerender() {
        $this->inventory->find('tbody')->bind($this->db,array(
          'altClass'=>'even',
          'selectClass'=>'rax-selected-pal rax-metalic',
          'key'=>'id',
          'selected' => $this->selectedId
        ));
    }

    protected function rowClick($e) {
        $id = is_int($e) ? $e : $e->intVal();
        $this->selectedId = $id;
        $row = $this->db[$id-1]; // get row data
        $img = '<img src="views/images/'.$row['photo'].'" align="left" class="pad" />';
        $details  = $row['details'];
        $this->info->html($img.$details);
    }
    
}
?>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Phone Inventory</title>
    <link href="raxan/ui/css/master.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 8]><link rel="stylesheet" href="raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
    <link href="raxan/ui/css/default/theme.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="c35 container prepend-top">
        <h2>Phone Inventory</h2>
        <table id="inventory" class="rax-table column c20 rax-box-shadow">
            <thead>
                <tr class="tbl-header">
                    <th>SKU</th><th>Description</th><th>Qty</th>
                </tr>
            </thead>
            <tbody xt-delegate="tr #click,rowClick" xt-autoupdate>
                <tr id="row{id}" class="{ROWCLASS} mouse-cursor" data-event-value="{id}">
                    <td>{sku}</td><td>{desc}</td><td>{qty}</td>
                </tr>
            </tbody>
        </table>
        <div id="info" class="column c13" xt-autoupdate></div>
    </div>
</body>

</html>

Data Source (data/phones.csv):

id,sku,desc,qty,photo,details
1,IPH01,iPhone,200,iphone.jpg,The iPhone is an Internet and multimedia enabled smartphone designed and marketed by Apple Inc. The iPhone functions as a camera phone and a portable media player.
2,IPH02,iPhone 3Gs,150,iphone3gs.jpg,"iPhone 3GS is a GSM cell phone that's also an iPod, a video camera, and a mobile Internet device with email and GPS maps."
3,RIMB,BlackBerry Bold,160,blackberry.jpg,The BlackBerry Bold  is a high-end mobile phone data device (smartphone) developed by Research In Motion.
4,DRO1,Motorola Driod,145,droid.jpg,The Motorola Droid is an Android-based smartphone by Motorola distributed by Verizon Wireless in the United States.
5,HTC01,HTC Hero,260,htc.jpg,"HTC Tattoo is all about you. It's the first phone that can be customized inside and out. Decide how your phone looks, then decide what you want to look at."
6,EVO4G,HTC EVO 4G,100,evo.jpg,"The HTC Evo 4G (trademarked in capitals as EVO 4G) is a smartphone developed by the HTC Corporation that was previously known by its codename ""Supersonic""."
7,PRE,Palm Pre,120,pre.jpg,"The Palm Pre phone gives you what you need for work life, personal life, and everything in between. "

Raxan Examples

Phone Inventory

Click on an item from the list below