PDA

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



robertdbuckley
30 Sep 2011, 7:37 AM
Hi,

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.



Ext.onReady(function(){



// 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);



}



}



});



myStore.load();



var gridPanel = new Ext.grid.GridPanel({



title: "postgres connection",



region: "center",



viewConfig: {forceFit: true},



store: myStore,



height:200,



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,


Rob

carol.ext
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' },
...
]
}

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