Easy Ext :)

Home | ExtJs Website | ExtJs Official Examples | ExtJs Forum | Other ExtJs Links

• Easy Ext Introduction
• Sliding Text & Toggle
• Highlight & Colour Things
• Scale Things
• Message Boxes and Alerts
•  
• Simple AJAX Gallery
• Ext AJAX Php Class

Ext AJAX Php Class

OO Update Class

This class is very simple, so the docs are quite succint :)

Basically we wrap a small subset of ExtJS inside a php class which allows you to update parts of your page in an AJAX fashion without needing to learn any javascript. Whilst this is useful on small scale applications - it is probably not up to scratch for enterprise useage.

Click here to download the zip file

Whats in the zip?

Included in the zip are the files required to make this work:

• index.php (this file)
• demo.php (a demo of whats on this page)
• class
  • ooUpdateJS.php (the class file)
• js
  • mini-ext.js (a standalone basic version of ExtJS)
  • ooUpdateJS.js (the small js file used to do the AJAX)
• php
  • updateJS.php (a demo php server side file)

How do you use it?

Invoke an instance of the class (require_once first) and use that across the page to access the class methods.

<?php<br /> require_once('class/ooUpdateJS.php');<br /> $update = new ooUpdateJS();<br /> ?>

In the head area of your html page call the 2 javascript scripts

<?php <br /> echo $update->addExt();<br /> echo $update->addJSUpdate(); <br /> ?>

Almost done!

Now when you need to have a section of your page updated, call the link generation method with some parameters and the class will make the link correctly when you run the page.

<a href="javascript:;" <?php echo $update->makeLinkDiv("updateMe","basicUpdate",array('arg1'=>'This is my title','arg2'=>'This is my updated text')); ?>>This is a link!</a>

Lets break that down a little:

• makeLinkDiv - this is the class method to make up the links to update a div (or similar area)
  • makeLinkDiv('div','function',array(arguments))
    • div = id of the div you need to update
    • function = the 'method' in your php server side file
    • arguments = any args you want to pass to the method (no limit) as an array

Now create a server side php file

The server side file simply captures the request from javascript and processes it, it then returns JSON encoded text along with a status message (Success / Fail) which advises the javascript what to do.

You can do anything you like as long as you maintain a couple of things.

• You MUST:
  • not rename the vars sent back to the javascript
  • use html fragments - any other data is ignored
  • use the status messages correctly - check the demo php file for the correct ones

An example of the above link would require code similar as follows:

<?php<br /> //there will be a set way the data is passed to us <br /> //this starts with a 'method' so we can work all that out now..<br /> if(isset($_REQUEST['method'])){<br /> <br /> //now test the method against a switch which contains all the methods<br /> switch ($_REQUEST['method']){<br /> <br /> case "basicUpdate":<br /> //this method simply returns the arguments recieved<br /> //we set arg1 and arg2<br /> $title = $_REQUEST['arg1'];<br /> $text = $_REQUEST['arg2'];<br /> <br /> $output = "<strong>{$title}</strong><br>";<br /> $output .= $text;<br /> <br /> //set the success flag<br /> $status = "Success";<br /> break;</p> <p class="red">default:<br /> $status = "Failed";<br /> $output = "";<br /> break;<br /> }</p> <p class="red">}else{<br /> $status = "Failed";<br /> $output = "";<br /> }<br /> </p> <p class="red">echo "{\"status\" : \"{$status}\", \"htmlText\" : ".json_encode($output)."}";</p> <p class="red">?></p>

Optional parameters which can be set:

There are a couple of optional parameters which can be used to tweak the way the class operates for your individual useage.

setPHPPath = this sets the path to your server side file from the web root
default: /classes/oo_update/php/updateJS.php
example: $update->setPHPPath('/your/path/here/myserverfile.php')

setJSPath = this sets the path to the javascript file from the web root
default: /classes/oo_update/js/ooUpdateJS.js
example: $update->setJSPath('/js/ooUpdateJS.js')

setEXTPath = this sets the path to the ExtJS file from the web root (you may already use one)
default: /classes/oo_update/js/mini-ext.js
example: $update->setEXTPath('/ext-2.0/ext-all.js')

 

ooUpdateJS is © Owen Lees 2008
(Apart from the Ext Library which most certaintly isnt!)

ExtJS can be found here...

 

We used...

• Ext.Element : Provides methods/functions to retrive DOM/Page elements.
• get -> Pull an element from the DOM/page and work with it
• Ext.Data : Provides data services
• Ext.Ajax : Provides a simple way to make Ajax Requests
• request -> Pull data from server side

Try it out!

OO Update demo page.

This page demonstrates the AJAX update using the code samples above.

This is a link with the onClick part generated by the class....Click Me!

This is another link with the onClick part generated by the class, this time we insert some latinesque from the server side....Click me too!

We didnt use any arguments this time as the server script doesnt require any.

 

ooUpdateJS is © Owen Lees 2008
(Apart from the Ext Library which most certaintly isnt!)

ExtJS can be found here...

The Javascript Code

//quick and dirty ajax update to file system. //ooupdate javascript //version 0.1 //copyright Owen Lees 2008 ooUpdate = function() { // reference local blank image Ext.BLANK_IMAGE_URL = '/ext-2.0/resources/images/default/s.gif'; return{ init:function() { //do nowt yet }, upDateDiv:function(div,phpFunction,phpPath,argString){ //now send the ajax Ext.Ajax.request({ //ajax request configuration waitMsg: 'Locating information...', url: phpPath+'?method='+phpFunction+"&"+argString, //url to server side script showLoadIndicator: true, failure: function(response,options){ Ext.get(div).update('Failed to contact server'); }, success: function(response,options){ var obj = Ext.util.JSON.decode(response.responseText); if(obj.status == "Success"){ //update product area with html from the server Ext.get(div).update(obj.htmlText); }else{ Ext.get(div).update('An error occurred'); } } }); //end ajax request }, dummy:function() { //dummy function } } //******************************************************************************** }(); Ext.onReady(ooUpdate.init, ooUpdate);

The PHP Code

/** * OO Update - Ajax Updater * ooupdate resource file * version:0.0.1 */ class ooUpdateJS { /** * Path to the php script directory * Relative to site web root * * @var string */ public $php_script_path = "/classes/oo_update/php/updateJS.php"; /** * Path to the javascript script * Relative to site web root * * @var string */ public $js_script_path = "/classes/oo_update/js/ooUpdateJS.js"; /** * Path to the EXT script * Relative to site web root * * @var string */ public $ext_script_path = "/classes/oo_update/js/mini-ext.js"; /** * */ function __construct() { //TODO - Insert your code here } /** * Add an Ext path to the script * This should be added in the head section: echo $upd->addExt(); * */ public function addExt() { //simply return the path to Ext as a script include $path = "<script type=\"text/javascript\" src=\"".$this->ext_script_path."\"></script>"; return $path; } /** * Add the javascript updater path to the script * This should be added in the head section: echo $upd->addJSUpdate(); * */ public function addJSUpdate() { //simply return the path to Ext as a script include $path = "<script type=\"text/javascript\" src=\"".$this->js_script_path."\"></script>"; return $path; } /** * Makes a link which calls the javascript update with the function * name and div to be updated. * Also recieves an array of arguments to send to the php script. * * Place this INSIDE a <a href="javascript:;" {here}> * * @param string $div * @param string $function * @param array $args */ public function makeLinkDiv($div,$function,$args=""){ $on_click = "ooUpdate.upDateDiv(\"".$div."\",\"".$function."\",\"".$this->php_script_path."\""; //run through the array of args and add to the call string if(!empty($args)){ $on_click .= ",\""; foreach($args as $param => $value){ $on_click .= $param."=".$value."&"; } $on_click .= "\""; }else{ $on_click .= ",null"; } //close the onclick statment $on_click .= ")"; //make the bones of the link call $link = "onClick='".$on_click."'"; return $link; } /** * Stores the path to the php script * relative to site web root * * @param string $path */ public function setPHPPath($path){ $this->php_script_path = $path; return null; } /** * Stores the path to the javascript we need * relative to site web root * * @param string $path */ public function setJSPath($path){ $this->js_script_path = $path; return null; } /** * Stores the path to the EXT file(s) we need * relative to site web root * * @param string $path */ public function setEXTPath($path){ $this->ext_script_path = $path; return null; } }

Website created and managed by Cooper Holt Ltd ©2008