Ext

sixtoedsloth · #1 10-03-2007, 09:28 AM

Just so some people dont suffer the same as me

the (enlightening and very good

) The Introduction Page to Ext does not work with new Ext 2.0 Alpha release (as it currently stands).

Hi All - Noob here

This may seem a bit pathetic, with an easy answer no doubt, but it is doing my head in

I was following the examples given at The Introduction Page. The paragraph example and AJAX worked just fine but i couldnt get the grid example to work.

I ran it under Firebug and i got an error saying 'Ext.grid.Grid is not a constructor'.

Am i missing some include file or something? There is no mention in the write-up that there should be any other files included. It suggests it should run as-is and i followed the instructions to the letter AFAIK.

my html file contains these includes

    <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.js"></script>
    <script type="text/javascript" src="grid.js"></script>
....

<div id="grid-example" style="overflow: hidden; width: 535px; height: 125px;border:2px solid #999;margin:20px 50px;visibility:hidden;"></div>

where grid.js contains the user code.

the grid.js (basically copied from the page) contains

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}); //  <------stumbles here
	grid.render();
	grid.getSelectionModel().selectFirstRow();
});

and it wont generate the code and stumbles at line shown above. I tried it with other grid examples and the same error occurred.

Please make a tired man happy

Thx In advance

Alex