Grid Display in Ext Js

Question

I am trying to run this following code in ext-4.2.1.883 but i am not getting any error

<html>
<head>
<title>Grid</title>
<link rel="stylesheet" type="text/css"
href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css" />
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// add your data store here
var store = new Ext.data.Store({
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
//...more rows of data removed for readability...//
],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
]
});
var grid = new Ext.create('Ext.grid.Panel',{
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:300,
width:500,
store: store,
stateful: true,
    collapsible: true,
    multiSelect: true,
columns: [
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline'}
]
});
});


</script>

</head>
<body>
<!-- Nothing in the body -->

</body>
</html>

but when i try to run it in browser nothing is shown. please help

SW4 SW4 · Accepted Answer · 2013-11-01T09:54:41

You have a number of errors, try:

<!doctype html>
<html lang="en">
<head>
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css">
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script>
Ext.onReady(function() {

var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
        [
            1,
            "Office Space",
            "Mike Judge",
            "1999-02-19",
            1,
            "Work Sucks",
            "19.95",
            1
        ],
        [
            3,
            "Super Troopers",
            "Jay Chandrasekhar",
            "2002-02-15",
            1,
            "Altered State Police",
            "14.95",
            1
        ]
    ]
});


var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
    {header: "Id", dataIndex: 'id', hidden:true},
    {header: "Title", dataIndex: 'title'},
    {header: "Director", dataIndex: 'director'},
    {header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},
    {header: "Genre", dataIndex: 'genre'},
    {header: "Tagline", dataIndex: 'tagline'}
]
});



});


</script>

</head>
<body>


</body>
</html>

So, what have I done to your code?

Changed the page to use an HTML5 setup - is this necessary? I just threw it in there, you'll have to decide
The type of store you're using is really an array store, so I changed the type
I changed your use of 'new' to the create method, which is advised in Ext JS
I removed some properties you had in place to simplify the code- by all means add these back in now you have a working example
Crucially, you should ensure the data you are supplying matches the data you are interpreting, the record model you are using, and the grid columns you're feeding. To simplify things I removed your reader (not particularly necessary to define given such a simple setup) so you only have the fields specified on the store mapped to whichever columns you want in the grid.

Grid Display in Ext Js

1 Answers