PDA

View Full Version : HELP: Empty Page (No Display)



seyz4all
9 Sep 2011, 9:24 AM
Please i need help in displaying a list from a json data gotten from my php script.

Its not display anything, what am i doing wrong ?

Heres what i have

data.php


<?php

$var= '{ "data":' ;


$mysql = new mysqli('localhost','root','','flightapp') or die('There was a problem');


if($result = $mysql->query('SELECT airport_name, airport_code FROM airports')) {
$json_results = array();
while($row = $result->fetch_object()) {
$json_results[] = $row;
}
//echo json_encode($json_results);


//echo '{"data": '.json_encode($json_results).'}';
echo "$var".json_encode($json_results)." }";


} else {
// error occurred
echo 'error: ' . $mysql->error;


}
?>


json data displayed when i load data.php in the browser

{ "data":[{"airport_name":"John Airport","airport_code":"(JCS)"},{"airport_name":"Babe Intl Airport","airport_code":"(BIA)"}] }

data.js

Ext.regModel('Airports', { fields: [
{name: 'airport_name', type: 'string'},
{name: 'airport_code', type: 'string'}
]
});

ListDemo.ListStore = new Ext.data.Store({
model: 'Airports',
proxy: {
type: 'ajax',
url : 'data.php',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoload:true
});

index.js

ListDemo = new Ext.Application({ name: "ListDemo",


launch: function() {


ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: '{airport_code}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});


ListDemo.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListDemo.ListStore,
itemTpl: '<div class="airport">{airport_name} {airport_code}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
ListDemo.detailPanel.update(record.data);
ListDemo.Viewport.setActiveItem('detailpanel');
}
});


ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items:[ListDemo.listPanel, ListDemo.detailPanel]
});


}
});