Cannot seem to populate combo box remotely in Extjs - combobox

Question

I've tried all manor of things to get this to populate the combo drop-down box.
When typing, say "Apple", it appears to be loading the data but, nothing ends up in the drop down box. Firebug shows the data has been loaded. So, where am I going wrong? Thanks.
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Basket',
emptyText : 'Type a fruit name',
queryMode : 'remote',
minChars : 3,
fields : ['id', 'name'],
store : {
proxy: {
type: 'jsonp',
callbackKey: 'method',
url: 'http://www.comparetrainfares.co.uk/train_scripts/data.php',
reader: {
root: 'items'
},
}
},
needleKey : 'query',
labelKey : 'id',
label : 'name',
displayField : 'name',
width : 260,
forceSelection: true,
renderTo : query1,
});
<?php
header('Access-Control-Allow-Origin: *');
//header('Content-Type: application/json; charset=utf8');
//header('Content-Type: application/x-json');
// http://www.comparetrainfares.co.uk/train_scripts/data.php
$output = array();
$output[] = array('id' => '1', 'name' => 'Apple');
$output[] = array('id' => '2', 'name' => 'Banana');
$output[] = array('id' => '3', 'name' => 'Orange');
$output[] = array('id' => '4', 'name' => 'Lemon');
$objects = array('items' => $output);
echo json_encode($objects);
?>

Answer 1

You are using a jsonp proxy. This is not the default ajax way of loading the store. The php script should be receiving a function name from the 'callback' parameter sent to the php script and then the returning data should be in a format like this:
callback({"items":[{"id":"1","name":"Apple"},{"id":"2","name":"Banana"},{"id":"3","name":"Orange"},{"id":"4","name":"Lemon"}]})
And remember to replace 'callback' with the name of whatever string is being sent in the callback parameter.

Answer 2

This is what I get from FireBug when I type the word "Appl" into the combo box. I know the data coming back is different from what I'm typing but, I still don't get anything even when I enter something which should match.
Under the 'Params' tab I see:
_dc 1361011625341
callback Ext.data.JsonP.callback1
limit 10
page 1
query appl
start 0
The 'Response' tab shows:
{rows:[{"id":"1","genre_name":"Comedy"},{"id":"2","genre_name":"Drama"},{"id":"3","genre_name":"Action"},{"id":"4","genre_name":"Mystery"}]}
The 'JSON' tab shows:
Sort by key
rows
[Object { id=
"1"
, genre_name=
"Comedy"
}, Object { id=
"2"
, genre_name=
"Drama"
}, Object { id=
"3"
, genre_name=
"Action"
}, Object { id=
"4"
, genre_name=
"Mystery"
}]
0
Object { id=
"1"
, genre_name=
"Comedy"
}
1
Object { id=
"2"
, genre_name=
"Drama"
}
2
Object { id=
"3"
, genre_name=
"Action"
}
3
Object { id=
"4"
, genre_name=
"Mystery"
}