extjs4 data.store use with proxy - ajax

Question

I want to get data from Yii controller action in Ext.data.store with following code:
var vehicles = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['vehiclename'],
root: 'vehicles'
}),
proxy: new Ext.data.HttpProxy({
url: '<?php echo $this->createUrl('GetVehicles');?>'
}),
autoLoad: true
});
or following code for vehicles:
var vehicles = Ext.create('Ext.data.Store', {
fields: [
{name: 'vehiclename'}
],
proxy: {
type: 'ajax',
url: '<?php echo $this->createUrl('GetVehicles'); ?>',
reader: {
type: 'json',
root:'vehicles'
}
},
autoLoad: true
});
My action code is:
public function actionGetVehicles()
{
$sql = "select vehicleName from vehicletbl inner join companytbl on vehicletbl.companyid=companytbl.companyid and companytbl.companyid='2';";
$vehicles = Yii::app()->db->createCommand($sql)->queryAll();
//var_dump($vehicles);
echo '{vehicles:'.json_encode($vehicles).'}';
}
When i send request to action with browser address bar i get following json:
{vehicles:[{"vehiclename":"pride"},{"vehiclename":"benz"}]}
but i don't know why Ext.data.store can't get data and store themes!
What is wrong in my code?
I use store at:
items: [treePanel,Ext.create('Ext.grid.PropertyGrid', {
title: 'History',
closable: false,
header: true,
sortableColumns: false,
customEditors: {
Vehicle: Ext.create('Ext.form.ComboBox', {
store: vehicles,
queryMode: 'local',
displayField: 'vehiclename'
})
},
/*propertyNames: {
'evtStart': 'Start Time'
},*/
source: {
"Vehicle": 'Select Vehicle',
"Select Start Date": false,
"Select End Date": true
}
})]
Chrome developer tool output:

Answer 1

You returned json is not valid. It should be:
{"vehicles":[{"vehiclename":"pride"},{"vehiclename":"benz"}]}
(Quotation marks around the root vehicles).