Extjs Don't load Grid. PHP - php

Question

Somebody would helpme with this code:Grid dont load infomations.
Below is the code I'm using, but the grid carries no information.
Extjs
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country',
idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
Ext.create('Ext.grid.Panel', {
title: 'Retorno',
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
store:store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Area', dataIndex: 'area', flex: 1 }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
data.php here is the code with json code.
<?php
print '{
"total": 10,
"country": [
{
"name": "CULTIV",
"area": "6.96120082466223e-007"
},
{
"name": "asdASdasd",
"area": "123123123"
}
]
}';
?>

Answer 1

I think you need to set the store's autoLoad configuration to true. If you do not set this attribute, then you will need to call the load() method of the store.
Option 1
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
autoLoad:true,
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country'
//idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
Option 2
var store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
root: 'country'
//idProperty: 'total'
}
},
//alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'area']
});
store.load();
I created a working fiddle for a demonstration.