PDA

View Full Version : Xtreme newbie needs help following examples in Tutorial:Getting Productive (Grid)



TrotskyIcepick
18 Mar 2010, 12:45 AM
I'm following to the letter the examples here: http://www.extjs.com/learn/Tutorial:Getting_Productive

and get to the section on Grids, I have copied and pasted the supplied script into ExtStart.js, but when I load the page into Firefox, Firebug reports:

this.el is null
http://localhost/ext-3.1.1/ext-all-debug.js
Line 15366

A similar message occurs when loading into Google Chrome.

Honestly, I've never done an iota of programming before (I'm only having a crack at Ext because I'm so impressed with how it looks), so any input will be greatly appreciated.

Thanks In Advance
Andrew

fay
18 Mar 2010, 2:38 AM
That looks very much like a 1.x example which won't work "out of the box" for 3.x.

To get your example to work (correcting the path to extjs311):


<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="../ext311/resources/css/ext-all.css">

<script type="text/javascript" src="../ext311/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext311/ext-all-debug.js"></script>

<script type="text/javascript">
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.GridPanel(
{
renderTo: 'grid-example',
autoHeight: true,
ds: ds,
cm: colModel
});
});
</script>

</head>

<body>
<div id="grid-example"></div>
</body>
</head>

TrotskyIcepick
18 Mar 2010, 3:19 AM
Thanks Fay,

I replaced the original :
var grid = new Ext.grid.GridPanel({el: 'grid-example', ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
Ext.get('grid-example').show();


with your :

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

And it now works fine.

Ext really shouldn't be putting out faulty code especially in a tutorial.

Thanks Again
Andrew

fay
18 Mar 2010, 3:29 AM
Ext really shouldn't be putting out faulty code especially in a tutorial.

If you look at the Tutorials (http://www.extjs.com/learn/Tutorials) page you'll see that it specifies that particular tutorial is for 2.x ;)

TrotskyIcepick
18 Mar 2010, 9:56 AM
Ahhh, well then, unless I'm going blind / nuts, there doesn't seem to be any tutorial for 3.1.1?