= ExtJS =
Javascript framework
== Sample with ExtJS 4.1 and 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;j