View Full Version : PHP Data from Database to List

8 Sep 2011, 1:54 PM
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



$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;



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'


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.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items:[ListDemo.listPanel, ListDemo.detailPanel]