Results 1 to 8 of 8

Thread: Unable to render grid widget

  1. #1

    Question Unable to render grid widget

    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 ({
    			proxy:  new ( response ),
    			reader: new (
    					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.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    Looks OK. What does the Json look like?

  3. #3


    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"}]}

  4. #4


    Wow. If necessary, I can try to format that a bit. It looks worse than I expected.

  5. #5


    And, for the purposes of full disclosure, the markup includes this:

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

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    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.

  7. #7


    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.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    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()

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts