View Full Version : How to fill a grid with json data retrieved from a postgresql query with php 5.3.1?

30 Sep 2011, 7:37 AM

I have a php script which retrieves data from postgres and encodes it into json.

$connection=pg_connect("host=*** port=*** dbname=*** user=*** password=***");
$result = pg_query('SELECT * FROM postgres');

$rows = array();
while($r = pg_fetch_assoc($result)) {
$rows[] = $r;
print json_encode(array_values(pg_fetch_all($result)));

the results look like this

[{"field_1":"1","field_2":"row 1"},{"field_1":"2","field_2":"row 2"},{"field_1":"3","field_2":"row 3"}]

the table has 2 fields ...field_1 and field_2

I would like to now put this into an ext grid but am a bit lost with the mappping of fields and use of the reader and json store

I have coded this grid , but the fields are empty.


// reference local blank image

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

var myReader = new Ext.data.JsonReader({

idProperty: 'id',

root: 'field_1',

fields: [

{name: 'field_1', mapping: 'field_1', type: 'int'},

{name: 'field_2', mapping: 'field_2',type: 'string '}



var myStore = new Ext.data.Store({

url: 'postgres.php',

reader: myReader,

listeners: {

load: function(store, records, options) {

console.log(store, records);





var gridPanel = new Ext.grid.GridPanel({

title: "postgres connection",

region: "center",

viewConfig: {forceFit: true},

store: myStore,


cm: new Ext.grid.ColumnModel({

defaults: {

sortable: true


columns: [

{header: "field_1", dataIndex: "field_1"},

{header: "field_2", dataIndex: "field_2"}




var mainPanel = new Ext.Panel({

renderTo: 'grid',

height: 450,

width: 800,

items: [gridPanel]


}); // EO onReady

Would anyone be able to help me configure the grid...and possibly also the php to render the results into the grid?

Thanks for any tips,


30 Sep 2011, 9:01 AM
Your use of "root" on the reader is incorrect. Your data is an array, so there is no root. By commenting out the root in the reader, I got your data to load in the store. I played with your example and the data then loaded in the grid if I loaded the data after the grid rendered.

var myReader = new Ext.data.JsonReader({
idProperty: 'id',
// root: 'field_1',
fields: [
{name: 'field_1', mapping: 'field_1', type: 'int'},
{name: 'field_2', mapping: 'field_2',type: 'string '}

You would need a root only if your data were structured differently, as shown in the example in the API (http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.data.JsonReader). In the example, the reader uses a root of 'rows' and the data looks like this where I put the root of "rows" in red :

results: 2000, // Reader's configured totalProperty
rows: [ // Reader's configured root
// record data objects:
{ id: 1, firstname: 'Bill', occupation: 'Gardener' },
{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },

30 Sep 2011, 11:48 AM
Thanks for the solution...that was actually logical when you hear it from someone who knows!....silly me!