## page was renamed from ExtJS
= ExtJS =
Javascript framework
== Sample with ExtJS 4.1 and PHP ==
'''Structure'''
{{{
.
|-- exercise.html
|-- app
| `-- exercise.js
|-- extjs
| `-- ext-all.js
| `-- resources
| `-- ux
|-- images
| `-- android.png
| `-- gimp.png
|-- js
| `-- jquery-1.7.2.min.js
|-- php
`-- jsonpois.php
}}}
'''exercise.html'''
{{{#!highlight html
COM-UT Exercise
}}}
'''app/exercise.js'''
{{{#!highlight javascript
/*
Exercise.js -
EXT Js App that gets POI info in JSON format from jsontest.php
and shows POI info in a Grid and in Google Maps.
*/
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');
Ext.require([
'Ext.window.*',
'Ext.tab.*',
'Ext.toolbar.Spacer',
'Ext.layout.container.Card',
'Ext.layout.container.Border',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.ux.GMapPanel'
]);
/*Class Exercise */
function Exercise(){
var self=this;
self.gridx=null;
self.myData=[];
self.gmapwin=null;
self.count=0;
self.poiList = [];
self.gmapmarkersList = [];
self.interval = 1000;
/*Define the model in ExtJS for the POIs*/
self.definePOIModel = function(){
Ext.define('POI', {
extend: 'Ext.data.Model',
fields: [
{name: 'description'},
{name: 'lat'},
{name: 'long'},
{name: 'icon'}
],
idProperty: 'description'
});
}
/*Returns Google Maps object*/
self.getGoogleMap = function(){
return Ext.getCmp("gmapid").gmap;
}
/*Clears all markers from Google Maps*/
self.clearMarkers = function(){
for(var j=0;jlist=array();
}
function append($obj){
$this->list[] = $obj;
}
function size(){
return count($this->list);
}
function toJSON(){
$ret="";
for( $i=0;$i<$this->size();$i++)
{
$objx = $this->list[$i];
$ret = $ret . $objx->toJSON() . ",";
}
$ret = substr($ret,0,-1);
return "{\"poilist\":[" . $ret . "]}";
}
}
/*class for POI*/
class POI{
private $description;
private $lat;
private $long;
private $icon;
function __construct($desc,$lat,$long,$icon){
$this->description=$desc;
$this->lat=$lat;
$this->long=$long;
$this->icon=$icon;
}
function toJSON() {
$ret = "{";
$ret = $ret . " \"desc\":\"".$this->description. "\" , " ;
$ret = $ret . " \"lat\":\"" .$this->lat."\" , " ;
$ret = $ret . " \"lng\":\"".$this->long."\" , " ;
$ret = $ret . " \"icon\":\"".$this->icon."\" " ;
$ret = $ret . "}";
return $ret;
}
}
/* returned random latitude and longitude are based on an
aproximation of Portugal's geographical area*/
function getRandomLat(){
return rand(37000,42000)/1000;
}
function getRandomLon(){
return -1*rand(7000,9000)/1000; // West in longitude (-1)
}
/*outputs the json object */
function outputJSONData(){
// page output, do not cache to data be the most recent
// and the returned data must be in content type JSON
header("Content-type:application/json");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
$ml = new POIlist();
$android="android.png";
$gimp="gimp.png";
$icon=$gimp;
for($idx=0;$idx<250;$idx++){
$ml->append(new POI("POI " . $idx,getRandomLat(),getRandomLon(),$icon));
if($icon==$gimp){
$icon=$android;
}
else{
$icon=$gimp;
}
}
echo( $ml->toJSON() . "\r\n" );
}
// outputs JSON POI data
outputJSONData();
?>
}}}