PDA

View Full Version : getting this.el is null in the Tutorial:Getting Productive



gskluzacek
7 Feb 2010, 10:08 AM
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/introduction-ext/IntroToExt2.zip

Then in ExtStart.js I have the following 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



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

jay@moduscreate.com
7 Feb 2010, 10:58 AM
try this:

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

gskluzacek
7 Feb 2010, 12:30 PM
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!

jay@moduscreate.com
7 Feb 2010, 12:31 PM
i still would use renderTo over el anyway.