Ext Js中的网格显示

时间:2013-11-01 07:37:40

标签: extjs grid

我正在尝试在ext-4.2.1.883中运行以下代码,但我没有收到任何错误

<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>

但是当我尝试在浏览器中运行它时,没有显示任何内容。请帮忙

1 个答案:

答案 0 :(得分:1)

您有很多错误,请尝试:

<!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>

那么,我对你的代码做了什么?

  1. 将页面更改为使用HTML5设置 - 这是必要的吗?我刚把它扔进那里,you'll have to decide

  2. 您使用的商店类型实际上是一个数组商店,因此我更改了类型

  3. 我将'new'用于创建方法,which is advised in Ext JS

  4. 我删除了您现有的一些属性以简化代码 - 通过所有方法添加这些属性,现在您已经有了一个工作示例

  5. 至关重要的是,您应该确保您提供的数据与您正在解释的数据,您正在使用的记录模型以及您正在提供的网格列相匹配。为了简化操作,我删除了你的阅读器(不是特别需要定义这么简单的设置),所以你只需要在商店中指定的字段映射到你想要在网格中的任何列。