PHP Data from Database to List

[seyz4all]

Please i need you help in displaying a list from a json data gotten from my php script.

i have the app working as a php/jqm but phonegap does not support php so i now have to use json.

Now i have switch to Sencha Touch since i could not get it done in JQM.

The list displaying data is suppose to be linked to the full data via its id.
This was how i did it in php


<a href="<?php echo 'example.php?id=$id' ">

Heres what i have so far in Sencha Touch

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;


}
?>

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]
});


}
});