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:

    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'}
    				]
    			)
    		});
    		ds.load();
    		
    		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 (
    			'history', 
    			{
    				ds: ds,
    				cm: colModel,
    				autoSizeColumns: true
    			}
    		);
    						
    		alert ( 'grid built ' + grid + ' from datastore with ' + grid.getDataSource().getTotalCount() + ' records' );
    						
    		grid.render();
    						
    		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
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Looks OK. What does the Json look like?

  3. #3

    Default

    The Json is (apologies for the length):

    Code:
    {"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

    Default

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

  5. #5

    Default

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

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

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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

    Default

    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
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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
  •