1

我正在尝试在其中运行以下代码，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>

但是当我尝试在浏览器中运行它时，什么也没有显示。请帮忙

4

1 回答 1

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 设置 - 这是必要的吗？我只是把它扔在那里，你必须决定

  2. 您使用的存储类型实际上是数组存储，所以我更改了类型

  3. 我将您对“新”的使用更改为创建方法，这是在 Ext JS 中建议的

  4. 我删除了您为简化代码而拥有的一些属性 - 无论如何添加这些属性，现在您有一个工作示例

  5. 至关重要的是，您应该确保您提供的数据与您正在解释的数据、您使用的记录模型以及您提供的网格列相匹配。为了简化事情，我删除了您的阅读器（在给定如此简单的设置时不需要特别定义），因此您只需将商店中指定的字段映射到网格中您想要的任何列。

于 2013-11-01T09:54:41.710 回答