Results 1 to 4 of 4

Thread: getting this.el is null in the Tutorial:Getting Productive

  1. #1
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63

    Default getting this.el is null in the Tutorial:Getting Productive

    I'm new to ExtJS and I'm trying to go through the Tutorial:Getting Productive ( http://www.extjs.com/learn/Tutorial:Getting_Productive ) and I just copy pasted the code for the Grid part of the tutorial.

    When I try to load the ExtStart.html file I get the following error in FireBug console

    this.el is null

    any help would be greatly appreciated, thanks.
    -- Greg

    I used the example code files that I downloaded from the Tutorial:Essentials (http://www.extjs.com/learn/Tutorial:Essentials) found here: http://extjs.com/downloads/tutorial/...ntroToExt2.zip

    Then in ExtStart.js I have the following code:

    Code:
    Ext.onReady(function() {
    
    	var myData = [
    		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
    		['Ext',83.81,0.28,0.34,'9/12 12:00am'],
    		['Google',71.72,0.02,0.03,'10/1 12:00am'],
    		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
    		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    	];
     
    	var ds = new Ext.data.Store({
    		proxy: new Ext.data.MemoryProxy(myData),
    		reader: new Ext.data.ArrayReader({id: 0}, [
    			{name: 'company'},
    			{name: 'price', type: 'float'},
    			{name: 'change', type: 'float'},
    			{name: 'pctChange', type: 'float'},
    			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    		])
    	});
    	ds.load();
     
    	var colModel = new Ext.grid.ColumnModel([
    		{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
    		{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
    		{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
    		{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
    		{header: "Last Updated", width: 120, sortable: true, 
    			renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
                            dataIndex: 'lastChange'}
    	]);
     
    //	var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
    	var grid = new Ext.grid.GridPanel({el: 'grid-example', ds: ds, cm: colModel});
    	grid.render();
    	grid.getSelectionModel().selectFirstRow();
    	Ext.get('grid-example').show();
    
    });
    in the unmodified ExtStart.html file I have the following

    Code:
    <html>
    <head>
        <title>Introduction to Ext 2.0: Starter Page</title>
        
        <!-- Include Ext and app-specific scripts: -->
        <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
        <script type="text/javascript" src="ExtStart.js"></script>
        
        <!-- Include Ext stylesheets here: -->
        <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="ExtStart.css">
    </head>
    <body>
    	<h1>Introduction to Ext 2.0: Starter Page</h1>
    
        <div id="content">
            
        	<p>This is the starter page that accompanies the <a href="http://extjs.com/learn/Tutorial:Introduction_to_Ext2">Introduction to Ext 2.0 tutorial</a> on the Ext JS website.</p>
    
        	<p>This page is intended to help you interactively explore some of the capabilities of the Ext library, so please make sure that your script references are correct.  This page assumes by default that it is in a directory directly beneath the root Ext deployment directory.  For example, if your Ext directory structure is located at "C:\code\Ext\v1.0\," then this file should be saved in a directory like "C:\code\Ext\v1.0\tutorial\."  If you choose to locate this file somewhere else, then make sure you change the script references of this file as needed.</p>
    
        	<p>If you have any questions or issues getting this tutorial to work correctly, please stop by the <a href="http://extjs.com/forum/">Ext Forums</a> and ask for help!</p>	
    
        	<div id="myDiv">This is a test div.</div>
    	
        	<input type="button" id="myButton" value="My Button" />
            
    	</div>
    </body>
    </html>

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    try this:

    var grid = new Ext.grid.GridPanel({renderTo: 'grid-example', ds: ds, cm: colModel});

  3. #3
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63

    Default figured it out

    Thanks for the help, I figured my issue out... I didn't include the <div> tag with the appropriate id in the html page. DOH!

  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    i still would use renderTo over el anyway.

Posting Permissions

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