View Full Version : Unable to render grid widget

1 Jun 2007, 4:54 AM
I'm embarking on my first "real" project using Ext on top of jQuery so if this question seems overly simplistic and ignorant, it's only because it is. That said, I'm trying to render a grid when a page is loaded. The ready state is defined by existing jQuery code and now makes an ajax call to retrieve JSON data. Everything seems to progress well and the relevant objects seem to form nicely, but my final call to grid.render() displays nothing in my container.

I'm probably missing something utterly stupid, but I seem unable to track it down so I'm hoping more experienced eyes can point me in the right direction. Here's my code:

$.ajax ({
type: 'POST',
url: '/api/get_survey_history.php',
dataType: 'json',
global: false,
success: function ( response ) {
alert ( 'Response received' );
* Load the history data into memory
var ds = new Ext.data.Store ({
proxy: new Ext.data.MemoryProxy ( response ),
reader: new Ext.data.JsonReader (
totalProperty: "recordcount",
root: "records",
id: "name"
{name: 'name'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pct_change', type: 'float'},
{name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'}

alert ( 'loaded ' + ds.getTotalCount() + ' records' );

* Custom renderers

* Create the column template
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'name'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{id:'change',header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pct_change'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'last_change'}

alert ( 'colModel created with ' + colModel.getColumnCount() + ' columns' );

* Create the grid
var grid = new Ext.grid.Grid (
ds: ds,
cm: colModel,
autoSizeColumns: true

alert ( 'grid built ' + grid + ' from datastore with ' + grid.getDataSource().getTotalCount() + ' records' );


alert ( grid + ' rendered' );

If the data looks familiar, it's because it was "borrowed" directly from the example and translated to a JSON format that my real data will use.

Any help would be greatly appreciated.

1 Jun 2007, 4:58 AM
Looks OK. What does the Json look like?

1 Jun 2007, 6:49 AM
The Json is (apologies for the length):

{"recordcount":30,"records":[{"name":"3m Co","price":71.72,"change":0.02,"pct_change":0.03,"last_change"

:"9\/1 12:00am"},{"name":"Alcoa Inc","price":29.01,"change":0.42,"pct_change":1.47,"last_change":"9\

/1 12:00am"},{"name":"Altria Group Inc","price":83.81,"change":0.28,"pct_change":0.34,"last_change":"9

\/1 12:00am"},{"name":"American Express Company","price":52.55,"change":0.01,"pct_change":0.02,"last_change"

:"9\/1 12:00am"},{"name":"American International Group, Inc.","price":64.13,"change":0.31,"pct_change"

:0.49,"last_change":"9\/1 12:00am"},{"name":"AT&T Inc.","price":31.61,"change":-0.48,"pct_change":-1

.54,"last_change":"9\/1 12:00am"},{"name":"Boeing Co.","price":75.43,"change":0.53,"pct_change":0.71

,"last_change":"9\/1 12:00am"},{"name":"Caterpillar Inc.","price":67.27,"change":0.92,"pct_change":1

.39,"last_change":"9\/1 12:00am"},{"name":"Citigroup, Inc.","price":49.37,"change":0.02,"pct_change"

:0.04,"last_change":"9\/1 12:00am"},{"name":"E.I. du Pont de Nemours and Company","price":40.48,"change"

:0.51,"pct_change":1.28,"last_change":"9\/1 12:00am"},{"name":"Exxon Mobil Corp","price":68.1,"change"

:-0.43,"pct_change":-0.64,"last_change":"9\/1 12:00am"},{"name":"General Electric Company","price":34

.14,"change":-0.08,"pct_change":-0.23,"last_change":"9\/1 12:00am"},{"name":"General Motors Corporation"

,"price":30.27,"change":1.09,"pct_change":3.74,"last_change":"9\/1 12:00am"},{"name":"Hewlett-Packard

Co.","price":36.53,"change":-0.03,"pct_change":-0.08,"last_change":"9\/1 12:00am"},{"name":"Honeywell

Intl Inc","price":38.77,"change":0.05,"pct_change":0.13,"last_change":"9\/1 12:00am"},{"name":"Intel

Corporation","price":19.88,"change":0.31,"pct_change":1.58,"last_change":"9\/1 12:00am"},{"name":"International

Business Machines","price":81.41,"change":0.44,"pct_change":0.54,"last_change":"9\/1 12:00am"},{"name"

:"Johnson & Johnson","price":64.72,"change":0.06,"pct_change":0.09,"last_change":"9\/1 12:00am"},{"name"

:"JP Morgan & Chase & Co","price":45.73,"change":0.07,"pct_change":0.15,"last_change":"9\/1 12:00am"

},{"name":"McDonalds Corporation","price":36.76,"change":0.86,"pct_change":2.4,"last_change":"9\/1 12

:00am"},{"name":"Merck & Co., Inc.","price":40.96,"change":0.41,"pct_change":1.01,"last_change":"9\/1

12:00am"},{"name":"Microsoft Corporation","price":25.84,"change":0.14,"0":0.54,"last_change":"9\/1 12

:00am"},{"name":"Pfizer Inc","price":27.96,"change":0.4,"pct_change":1.45,"last_change":"9\/1 12:00am"

},{"name":"The Coca-Cola Company","price":45.07,"change":0.26,"pct_change":0.58,"last_change":"9\/1 12

:00am"},{"name":"The Home Depot, Inc.","price":34.64,"change":0.35,"pct_change":1.02,"last_change":"9

\/1 12:00am"},{"name":"The Procter & Gamble Company","price":61.91,"change":0.01,"pct_change":0.02,"last_change"

:"9\/1 12:00am"},{"name":"United Technologies Corporation","price":63.26,"change":0.55,"pct_change":0

.88,"last_change":"9\/1 12:00am"},{"name":"Verizon Communications","price":35.57,"change":0.39,"pct_change"

:1.11,"last_change":"9\/1 12:00am"},{"name":"Wal-Mart Stores, Inc.","price":45.45,"change":0.73,"pct_change"

:1.63,"last_change":"9\/1 12:00am"},{"name":"Walt Disney Company (The) (Holding Company)","price":29

.89,"change":0.24,"pct_change":0.81,"last_change":"9\/1 12:00am"}]}

1 Jun 2007, 6:49 AM
Wow. If necessary, I can try to format that a bit. It looks worse than I expected.

1 Jun 2007, 6:51 AM
And, for the purposes of full disclosure, the markup includes this:

<div id="history" style="border: 1px dotted #ccc; width: 700px; height: 400px;"></div>

1 Jun 2007, 7:38 AM
I don't know. It looks OK. You'll have to use Firebug, step through and poke around.

And try it with the yui adapter. I don't trust these other libs.

1 Jun 2007, 7:48 AM
Argh. Firebug reports no problems. With breakpoints created, I make it to the alert after grid.render() and all is well. Except that nothing is actually rendered. No go on switching to YUI (at least at the moment). I'm tying into an existing app that is already using jQuery.

1 Jun 2007, 8:08 AM
So what does your Store look like? Post a screenshot of it expanded in the debugger watch pane.

Use ext-all-debug.js, and carry on stepping into Grid.render()