Extjs grid doesnot display the table data - php

Question

I have used EXTJS for grid display and for pagination also.My problem is that grid panel is getting displayed but the table contents are not displayed in the grid.I have used php and mysql.
Php code to retrieve data from table :
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL | E_STRICT);
define('_PJEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);
define('PJPATH', dirname(__FILE__));
define('DB_DIR', PJPATH . DS . 'DB_SETUP');
define('LIB_DIR', PJPATH . DS . 'library');
if (file_exists(PJPATH . DS . 'template.php')) {
include_once PJPATH . DS . 'template.php';
include_once PJPATH . DS . 'process.php';
include_once LIB_DIR . DS . 'factory.php';
}
$page_num = $_REQUEST['start'];
$limit=$_REQUEST['limit'];
$data = PJFactory::getJobAuditDetails();
$rows= mysql_num_rows($data);
$result = PJFactory::displayJobAuditDetail($page_num, $limit);
while($num_rows= mysql_fetch_array($result,MYSQLI_ASSOC)){
$display[]=array('id'=>$num_rows['id'],
'id_job_audit'=>$num_rows['id_job_audit'],
'error_message'=>$num_rows['error_message']
);
}
$myData = array('errorDisplay'=>$display, 'totalCount'=>$rows);
echo json_encode($myData);
?>
Java Script page
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
Ext.onReady(function(){
// Ext.QuickTips.init();
var store =new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'processdisplay.php'
// method: 'GET'
}) ,
//type: 'ajax',
reader: new Ext.data.JsonReader({
type: 'json',
root:'errorDisplay',
totalProperty:'totalCount',
id: 'id'
},
[
{name: 'id',mapping: 'id',type: 'int'},
{name:'id_job_audit',mapping:'id_job_audit',type:'string'},
{name :'error_message',mapping:'error_message',type:'string'}
]
),
autoLoad : true,
idProperty: 'id'
});
// baseParams:{task: "LISTING"}
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'id', width: 30, sortable: true, dataIndex: 'id'},
// {header: 'id', width: 100, sortable: true, dataIndex: 'id'},
{header: 'id_job_audit', width: 100, sortable: true, dataIndex: 'id_job_audit'},
{header: 'error_message', width: 250, sortable: true, dataIndex: 'error_message'}
],
stripeRows: true,
height:250,
width:500,
title:'Job Error Details',
bbar: new Ext.PagingToolbar({
pageSize:20,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
//store.show();
store.load();
// render this grid to paging-grid element
grid.render('paging-grid');
});
I have checked the result for echo json_encode($myData) in firebug.It displayed correctly and checked JSON option also in firebug it shows like below
errorDisplay
[Object { id="1", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, Object { id="2", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, Object { id="3", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, 22 more...]
totalCount
102
I dont know where am wrong.The grid is empty,displays message as "no topics to disply".
please make to clear.
Edit:
I have tested by encoding only the result which i retrieved from db.At the time I got display in the grid of first 25 records. i.e(echo json_encode($display) in my case)
Is array result only capable of encode in JSon?. Because Before I got in firebug as object of arrays.

Answer 1

The reader is a property of the proxy, not the store. Also, you should use a model to provide the fields. Should look something like this (untested):
Ext.require(['Ext.grid.*', 'Ext.data.*']);
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
mapping: 'id',
type: 'int'
}, {
name: 'id_job_audit',
mapping: 'id_job_audit',
type: 'string'
}, {
name: 'error_message',
mapping: 'error_message',
type: 'string'
}]
});
Ext.onReady(function() {
var store = new Ext.data.Store({
model: MyModel,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'processdisplay.php',
reader: {
type: 'json',
root: 'errorDisplay',
totalProperty: 'totalCount'
}
})
});
// baseParams:{task: "LISTING"}
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
header: 'id',
width: 30,
sortable: true,
dataIndex: 'id'
},
// {header: 'id', width: 100, sortable: true, dataIndex: 'id'},
{
header: 'id_job_audit',
width: 100,
sortable: true,
dataIndex: 'id_job_audit'
}, {
header: 'error_message',
width: 250,
sortable: true,
dataIndex: 'error_message'
}],
stripeRows: true,
height: 250,
width: 500,
title: 'Job Error Details',
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
//store.show();
store.load();
// render this grid to paging-grid element
grid.render('paging-grid');
});