PDA

View Full Version : Grid not loading data from php.



mstidham
15 Oct 2010, 1:55 PM
I am pretty new to this so I appologize. I have been through the tutorials specifically (Grids, PHP and SQL for newbies) and was able to get a grid to load data from mysql via php. However, now when I am trying to modify the example called "Portal" which has a javascript called sample-grid.js, I cannot get it to load the rows. The columns show up fine but I get nothing from the rows. Here is the code.

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
SampleGrid = function(limitColumns){

function italic(value){
return '<i>' + value + '</i>';
}

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


var columns = [
{id:'id',header: "ID", width: 160, sortable: true, dataIndex: 'id'},
{header: "Name", width: 75, sortable: true, dataIndex: 'Name'},
{header: "Address", width: 75, sortable: true, dataIndex: 'Ip'},
{header: "Class", width: 75, sortable: true, dataIndex: 'Class'},
{header: "OSType", width: 85, sortable: true, dataIndex: 'OSType'}
];

// allow samples to limit columns
if(limitColumns){
var cs = [];
for(var i = 0, len = limitColumns.length; i < len; i++){
cs.push(columns[limitColumns[i]]);
}
columns = cs;
}

SampleGrid.superclass.constructor.call(this, {
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/php/page/database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},[
//name: <must match to dataindex in column model> ,type <>, mapping: <field name>
{name: 'id', type: 'int', mapping: 'id'},
{name: 'Name', type: 'string', mapping: 'Name'},
{name: 'Address', type: 'string', mapping: 'Ip'},
{name: 'Class', type: 'string', mapping: 'Class'},
{name: 'OSType', type: 'string', mapping: 'OSType'}
]),
sortInfo:{field: 'Name', direction: "ASC"}
}),
columns: columns,
autoExpandColumn: 'id',
height:250,
width:600
});


}

Ext.extend(SampleGrid, Ext.grid.GridPanel);

Animal
15 Oct 2010, 11:28 PM
OK, we all have to start somewhere.

First, format posted code with [code] tags to help people read it.

As to your problem. The GridPanel itself is working, but there's no data.

In that case, your Store is not being loaded.

When working with a Store, always add a listener for the exception event so that it can inform you when you go wrong.

It's likely that the received JSON does not match with how you configured the Reader. Post your JSON (Formatted by http://jsbeautifier.org and in [code] tags.)