PDA

View Full Version : Need help with ArrayGrid



opokuat
4 Sep 2011, 3:56 PM
I'm new to Extjs and practicing Array Grid. I have the following codes which is suppose to display array grid in panel. However it doesn't work. Can can some please help

----------------- mY html Code------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Grid</title>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all-debug.js"></script>
<script src="Javascript/TestGrid.js"></script>
<script>
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data: '){
Ext.BLANK_IMAGE_URL = '../extjs/resources/image/defaults/s.gif';
}
</script>
</head>

<body>
</body>
</html>

------------------------------------------------------------
--------------------------- my TestGrid.js Code --------------------------------------
var TestGrid = function(){
//-----------------------------------------------------
var movieData = [
[1, "Office Space", "Mike Judge", 89, "199-02-19", 1, "Work Sucks", "19.95", 1 ],
[3, "Supper Troopers", "Jay Chandrasekhar", 100, "2002-02-15", 1, "Altered State Police", "14.95", 1 ]
];

var store = new Ext.data.Store({
data: movieData,
reader: new Ext.data.ArrayReader({id: 'id'}, [
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
/*{ name:'coverthumb',type:'string' convert:function(v, rawData){
return 'images/'+rawData[0]+'m.jpg';
}*/
])
});

var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Movie Database',
height: 200,
width: 520,
store: store,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
Columns: [
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released', xtype: 'datecolumn'},
{header: "Genre", dataIndex: 'genre'},
{header: "Price", dataIndex: 'price'},
{header: "Available", dataIndex: 'available'},
{header: "coverthumb", dataIndex: 'coverthumb'}
]
})
});
}
//--------------------------------------------------
Ext.onReady(TestGrid);

----------------------------------------------------
Can any of you tell me why grid do not display in the panel?

skirtle
4 Sep 2011, 4:08 PM
This forum is for ExtJS 4, not ExtJS 3.

Please wrap any code you post in CODE tags (# button on the editor toolbar).

From a quick look at your code I'd say there's a problem with your Columns option, it should be called columns with a lower case c.