GRID in Tutorial doesn't work...

**timfitz99** · 2 Jul 2007 12:41 PM

I'm going through the tutorial (Introduction to EXT), and I can't get the GRID feature to work. First I typed it in by hand, and nothing happened, so I copied and pasted from the page. Still nothing.

No error, just no grid. Any ideas?

**brian.moeskau** · 2 Jul 2007 1:33 PM

That example does work. It is a cut-down version of the basic grid sample in the docs:

http://extjs.com/deploy/ext/examples...rray-grid.html

You should have that example in your local Ext directory, so I would start there and see what's different in your implementation. If you can't figure it out, post some code so others can help you find your issues.

**timfitz99** · 3 Jul 2007 5:43 AM

Thanks for the reply. I looked at the version in the examples directory, and it's WAY different.

The code I copied directly from your tutorial follows. The html file to call it is your ExtStart.html (no changes). All of the other examples worked fine (I modified the paths to go to the proper place to find ext, etc). This one gives no results. I can use the examples version to learn, but I think you should check the tutorial as, to my eyes, it's inaccurate:

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});

grid.render();
grid.getSelectionModel().selectFirstRow();

});

**NFG** · 30 Jul 2007 7:46 AM

Yep, I had the same issue.
Following the tutorial with ExtStart.js to the letter. Everything worked right up until I tried the grid. Copy/pasted the code and reloaded but the grid did not display.

I got no error, but no grid either.

Looked back at the HTML file and found that I had correctly linked the .js files but not the .css files. The example won't work without them.

Correctly linked it works perfectly

**braajkumar** · 7 Feb 2008 12:07 PM

Hi there,

The grid is not working still...

Here is the code...

ExtStart.js

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 myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);

var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{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'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});

grid.getSelectionModel().selectFirstRow();
});

ExtStart.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Introduction to Ext: Starter Page</title>


<script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>


<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<h1>Introduction to Ext: Starter Page</h1>

<p>This is the starter page that accompanies the Introduction to Ext tutorial located at <a href="http://www.extjs.com/tutorial/introduction-ext">http://www.extjs.com/tutorial/introduction-ext</a>.</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://www.extjs.com/forums/">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 id="grid-example" style="overflow: hidden; width: 535px; height: 125px;border:2px solid #999;margin:20px 50px;visibility:hidden;"></div>

</body>
</html>

Error

Line 15679, Char : 13, Error : 'null' is not null or not an object....

I would appreciate some help on this issue... I am starting to explore grid and I am stuck....

**brian.moeskau** · 7 Feb 2008 8:04 PM

The example works correctly. You are calling renderTo:'content' but I don't see a div with that id anywhere, maybe that's the issue.

**santiagovalls** · 21 Feb 2008 8:03 AM

Please, make sure to be using a version of Ext 1.x and not 2.x. Surely, the tutorial was written for the first version...

Santi.

**Lexomatic** · 28 Feb 2008 7:34 PM

I only just started on extjs yesterday, so it was a bit of fun trying to 'fix' the tutorial example as a challenge for learning ExtJS. If you are like me and are using 2.x rather than 1.x while reading the tutorial, the solution is to replace this line in ExtStart.js:

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

with the following line:

var grid = new Ext.grid.GridPanel({el:"grid-example" , store: ds, cm: colModel, width:535});

and you should get pretty much the desired result without having to change the HTML.

**brian.moeskau** · 28 Feb 2008 8:35 PM

Are you referring to the Intro to Ext 2.0 tutorial here? http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0

The code in that example already uses a GridPanel properly. Or are you referring to something else? The original issue in this thread was referring to the 1.x version of the tutorial before it was upgraded to 2.0.

**Lexomatic** · 29 Feb 2008 12:43 PM

oops, me bad. Yesterday when I downloaded this tutorial I somehow navigated to the 1.1 version of the tutorial without realizing there was a 2.0 version. Thanks for pointing me in the right direction.

GRID in Tutorial doesn't work...

Thread Tools

Search Thread

Display

GRID in Tutorial doesn't work...

GRID in Tutorial doesn't work...

Grid not working

Grid not working

Make Sure...

Make Sure...

a fix for 2.x users

a fix for 2.x users