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.phpexercise.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5 <title>COM-UT Exercise</title>
6 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
7 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
8 <script type="text/javascript" src="extjs/ext-all.js"></script>
9 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=???????&sensor=false"></script>
10 <script type="text/javascript" src="app/exercise.js"></script>
11 </head>
12 <body>
13 <div id="gridDiv"></div>
14 </body>
15 </html>
app/exercise.js
1 /*
2 Exercise.js -
3 EXT Js App that gets POI info in JSON format from jsontest.php
4 and shows POI info in a Grid and in Google Maps.
5 */
6 Ext.Loader.setConfig({enabled: true});
7 Ext.Loader.setPath('Ext.ux', './extjs/ux');
8 Ext.require([
9 'Ext.window.*',
10 'Ext.tab.*',
11 'Ext.toolbar.Spacer',
12 'Ext.layout.container.Card',
13 'Ext.layout.container.Border',
14 'Ext.grid.*',
15 'Ext.data.*',
16 'Ext.util.*',
17 'Ext.state.*',
18 'Ext.ux.GMapPanel'
19 ]);
20 /*Class Exercise */
21 function Exercise(){
22 var self=this;
23 self.gridx=null;
24 self.myData=[];
25 self.gmapwin=null;
26 self.count=0;
27 self.poiList = [];
28 self.gmapmarkersList = [];
29 self.interval = 1000;
30
31 /*Define the model in ExtJS for the POIs*/
32 self.definePOIModel = function(){
33 Ext.define('POI', {
34 extend: 'Ext.data.Model',
35 fields: [
36 {name: 'description'},
37 {name: 'lat'},
38 {name: 'long'},
39 {name: 'icon'}
40 ],
41 idProperty: 'description'
42 });
43 }
44
45 /*Returns Google Maps object*/
46 self.getGoogleMap = function(){
47 return Ext.getCmp("gmapid").gmap;
48 }
49
50 /*Clears all markers from Google Maps*/
51 self.clearMarkers = function(){
52 for(var j=0;j<self.gmapmarkersList.length;j++){
53 self.gmapmarkersList[j].setMap(null);
54 }
55 }
56
57 /*Adds a marker to Google Maps*/
58 self.addMarker = function(poi){
59 var gmapx = self.getGoogleMap();
60 var image = "images/"+poi.icon;
61 var latlng = new google.maps.LatLng(poi.lat,poi.lng);
62 var marker = new google.maps.Marker({position: latlng,
63 map: gmapx, title:poi.desc,icon:image});
64
65 self.gmapmarkersList.push(marker);
66 }
67
68 /*Transforms the received data by AJAX to be used by the Grid
69 and Google Maps*/
70 self.alterData = function(){
71 if(self.poiList!=null){
72 self.clearMarkers();
73 self.myData=[];
74
75 for(var i=0;i<self.poiList.length;i++){
76 self.myData.push(['','','','']);
77 var poi = self.poiList[i];
78 self.myData[i][0] = poi.desc;
79 self.myData[i][1] = poi.lat;
80 self.myData[i][2] = poi.lng;
81 self.myData[i][3] = poi.icon;
82 self.addMarker(poi);
83 }
84
85 }
86
87 if(self.gridx!=null){
88 self.gridx.getStore().loadData(self.myData);
89 }
90 }
91
92 /*Create the raw data*/
93 self.getData = function (){
94 self.myData = [ ['','','',''] ];
95 return self.myData;
96 }
97
98 /*Creates the Grid datastore*/
99 self.getDataStore=function(modelName,data){
100 var store = Ext.create('Ext.data.ArrayStore', {
101 model: modelName,
102 data: data
103 });
104
105 return store;
106 }
107
108 /*Creates the Grid columns*/
109 self.getColumns=function(){
110 var cols = [{
111 text : 'Description',
112 flex : 1,
113 sortable : false,
114 dataIndex: 'description'
115 },
116 {
117 text : 'Latitude',
118 flex : 1,
119 sortable : false,
120 dataIndex: 'lat'
121 },
122 {
123 text : 'Longitude',
124 flex : 1,
125 sortable : false,
126 dataIndex: 'long'
127 },
128 {
129 text : 'Icon',
130 flex : 1,
131 sortable : false,
132 dataIndex: 'icon'
133 }];
134 return cols;
135 }
136
137 /*Creates the Grid contained by the Grid Window*/
138 self.createGrid=function(){
139 Ext.QuickTips.init();
140 Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
141 self.definePOIModel();
142 self.alterData();
143 var storex = self.getDataStore('POI',this.getData());
144 var grid = Ext.create('Ext.grid.Panel', {
145 store: storex,
146 stateful: true,
147 collapsible: true,
148 multiSelect: true,
149 stateId: 'stateGrid',
150 columns: self.getColumns(),
151 height: 350,
152 width: 400,
153 title: 'Grid POIs',
154 viewConfig: {
155 stripeRows: true,
156 enableTextSelection: true
157 }
158 });
159 self.gridx = grid;
160 }
161
162 /*Creates Grid Window to show the POIs*/
163 self.createGridWindow=function (title){
164 self.createGrid();
165 var window = Ext.create('Ext.Window', {
166 title: title,
167 width: 320,
168 height: 450,
169 x: 10,
170 y: 10,
171 plain: true,
172 headerPosition: 'top',
173 layout: 'fit',
174 items: self.gridx
175 });
176
177 return window;
178 }
179
180 /*Creates items requires to Google Maps WIndows*/
181 self.getGMapItems=function()
182 {
183 var center = {geoCodeAddr: 'Setúbal, Portugal', marker: {title: 'Setúbal'} };
184 var obj= {id:'gmapid',xtype: 'gmappanel', center: center,zoom:3};
185 return obj;
186 }
187
188 /*Creates Google Maps window*/
189 self.createGMapWindow=function(){
190 var obj = {
191 layout: 'fit',
192 title: 'Janela Google Map',
193 closeAction: 'hide',
194 width:450,
195 height:450,
196 border: false,
197 x: 400,
198 y: 10,
199 items: this.getGMapItems()
200 };
201 return Ext.create('Ext.Window', obj );
202 }
203
204 /*Transforms the received JSON object from AJAX invocantion
205 to the PHP page*/
206 self.jsonObjectReceived=function(data){
207 self.poiList = [];
208 for(var i=0;i<data.poilist.length;i++){
209 var poi = data.poilist[i];
210 self.poiList.push(poi);
211 }
212 }
213
214 /*Gets POIs in JSON format from PHP page*/
215 self.getPOIs=function(){
216 var url='php/jsonpois.php';
217 $.getJSON(url, self.jsonObjectReceived);
218 }
219
220 /* Timer handler, called every 2 seconds */
221 self.timerJSON=function(){
222 self.count++;
223 if(self.count==5){// updates in 5 seconds
224 self.getPOIs();
225 self.alterData();
226 self.count=0;
227 }
228 }
229
230 /*Sets Google Maps zoom level to 6*/
231 self.setZoom6=function(){
232 self.getGoogleMap().setZoom(6);
233 }
234
235 }
236
237 /*ExtJS Entry point*/
238 Ext.application({
239 name: 'COM-UT Exercise',
240 launch: function() {
241 var ex = new Exercise();
242 ex.getPOIs();
243 ex.alterData();
244 var windowx = ex.createGridWindow('Grid POIs');
245 windowx.show();
246 gmapwin=ex.createGMapWindow();
247 gmapwin.show();
248 window.setInterval(ex.timerJSON, ex.interval);
249 // sets zoom to 6 in 2 seconds
250 window.setTimeout(ex.setZoom6, 2000);
251 }
252 });
php/jsonpois.php
1 <?
2 /*Classes to represent a list of Point of Interest and a Point of Interest*/
3 class POIList{
4 private $list;
5
6 function __construct(){
7 $this->list=array();
8 }
9
10 function append($obj){
11 $this->list[] = $obj;
12 }
13
14 function size(){
15 return count($this->list);
16 }
17
18 function toJSON(){
19 $ret="";
20 for( $i=0;$i<$this->size();$i++)
21 {
22 $objx = $this->list[$i];
23 $ret = $ret . $objx->toJSON() . ",";
24 }
25 $ret = substr($ret,0,-1);
26 return "{\"poilist\":[" . $ret . "]}";
27 }
28 }
29
30 /*class for POI*/
31 class POI{
32 private $description;
33 private $lat;
34 private $long;
35 private $icon;
36
37 function __construct($desc,$lat,$long,$icon){
38 $this->description=$desc;
39 $this->lat=$lat;
40 $this->long=$long;
41 $this->icon=$icon;
42 }
43
44
45 function toJSON() {
46 $ret = "{";
47 $ret = $ret . " \"desc\":\"".$this->description. "\" , " ;
48 $ret = $ret . " \"lat\":\"" .$this->lat."\" , " ;
49 $ret = $ret . " \"lng\":\"".$this->long."\" , " ;
50 $ret = $ret . " \"icon\":\"".$this->icon."\" " ;
51 $ret = $ret . "}";
52 return $ret;
53 }
54 }
55
56 /* returned random latitude and longitude are based on an
57 aproximation of Portugal's geographical area*/
58 function getRandomLat(){
59 return rand(37000,42000)/1000;
60 }
61
62 function getRandomLon(){
63 return -1*rand(7000,9000)/1000; // West in longitude (-1)
64 }
65
66 /*outputs the json object */
67 function outputJSONData(){
68 // page output, do not cache to data be the most recent
69 // and the returned data must be in content type JSON
70 header("Content-type:application/json");
71 header("Cache-Control: no-cache");
72 header("Pragma: no-cache");
73 $ml = new POIlist();
74 $android="android.png";
75 $gimp="gimp.png";
76 $icon=$gimp;
77 for($idx=0;$idx<250;$idx++){
78 $ml->append(new POI("POI " . $idx,getRandomLat(),getRandomLon(),$icon));
79
80 if($icon==$gimp){
81 $icon=$android;
82 }
83 else{
84 $icon=$gimp;
85 }
86 }
87 echo( $ml->toJSON() . "\r\n" );
88 }
89
90 // outputs JSON POI data
91 outputJSONData();
92 ?>