View Full Version : Grid display problem...

23 Apr 2007, 6:00 AM

Brand new to Ext and am playing around with the Grid but, like most newbies, am having some issues I can't seem to debug. Essentially, my grid will only display the data/text that has a render: function associated. From the examples, it looks like the render: function is only needed if you wish to do something different in terms of formatting etc.

This is what my grid looks like:


Here's the .js that I use:


var datastore = new Ext.data.Store({
// HttpProxy should be used here
proxy: new Ext.data.ScriptTagProxy({
url: 'http://<webserver>/path-to-Tutorials/grid/grid-paging-data.php'

reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'total',
id: 'reqID'
}, [
{name: 'requestor_id', mapping: 'RequestorID'},
{name: 'request_text', mapping: 'RequestText'},
{name: 'building_area', mapping: 'Area'},
{name: 'date', mapping: 'reqDate', type: 'date', dateFormat: 'm-d-Y'}


// pluggable renders
function renderText(value, p, record){
return String.format('{1}', value, record.data['request_text']);
function renderTextPlain(value){
return String.format('<b><i>{1}</i></b>', value);

function renderDate(value){
return String.format('{1}', value.dateFormat('dd-mm-yyyy'));

function renderTxt(value) {
return String.format('{0}', value);

var columnmodel = new Ext.grid.ColumnModel([{
id: 'reqtxt',
header: "Request",
dataIndex: 'RequestText',
width: 465,
css: 'white-space:normal;',
renderer: renderText,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: false,
header: "Unit",
dataIndex: 'RequestorID',
sortable: true,
// renderer: renderTxt,
width: 50
header: "Building Area",
dataIndex: 'Area',
// renderer: renderTxt,
width: 80

id: 'date',
header: "Date",
dataIndex: 'date',
// renderer: renderDate,
sortable: true,
width: 70,

renderer: Ext.util.Format.dateRenderer('n/j/Y')

var grid = new Ext.grid.Grid('grid-paging', {
ds: datastore,
cm: columnmodel,
autoExpandColumn: 'reqtxt',
trackMouseOver: true

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('grid-paging', {
handles: 's'
rz.on('resize', grid.autoSize, grid);
// Render the grid

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, datastore, {
pageSize: 40,
// displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results to display'
datastore.load({params:{start:0, limit:40}});

The HTML file:

<title>Grid test</title>
<link rel="stylesheet" type="text/css" href="/RVCA/lib/resources/css/ext-all.css" />
<script type="text/javascript" src="/RVCA/lib/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/RVCA/lib/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/RVCA/lib/ext-all-debug.js"></script>
<script type="text/javascript" src="grid-paging.js"></script>
<div id="grid-paging" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 450px;"></div>

And the PHP script used to collect and encode the data:


$link = mysql_pconnect($db_server, $username, $password) or die("Could not connect");
mysql_select_db($db_instance) or die("Could not select database");

$sql_count = "SELECT reqID, RequestorID, RequestText, Area, reqDate FROM Request";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];

$rs_count = mysql_query($sql_count);
$rows = mysql_num_rows($rs_count);
$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
$arr[] = $obj;

Echo $_GET['callback'].'({"total":"'.$rows.'","rows":'.json_encode($arr).'})';

As you can see from the screen-cap, the data does appear to show up in the grid, it's just not fully visible. What am I doing wrong?

23 Apr 2007, 6:15 AM
The column definition's "dataIndex" refers to the field by name.

The field's "mapping" refers to how to extract the field value from the XHR response. You won't use that.

This will be a bit clearer in the next generation of the API docs.

23 Apr 2007, 6:35 AM
I removed the 'mapping:' entries, correlated 'dataIndex:' entries to the dataSource 'name:' entries (as in, the dataIndex for the various colums syntactically match the 'name' entries. And things changed...
Now it's all blank!

23 Apr 2007, 7:00 AM
I'm a dumba**!

mysql columnName == JsonReader name property == ColumnModel dataIndex property

And it all shows up.


23 Apr 2007, 7:35 AM
Record definition "mapping" property is the Json property from which to extract the data.

Record defintion "name" property can be anything you want. It's the field name by which you (and the ColumnModel) access the data from the Record.

ColumnModel "dataIndex" property references the Record field "name".

12 May 2009, 6:02 AM
Thanks for the clarification! Helped me even today!