网格显示在Ext JS中

我试图运行ext-4.2.1.883这个下面的代码，但我没有得到任何错误网格显示在Ext JS中

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

，但是当我尝试在浏览器中没有运行显示。请帮助

来源

2013-11-01 insanity

存在语法错误。先纠正它们。 – Krzysztof

你有一些错误，请尝试：

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

所以，我做了什么你的代码？

更改页面使用HTML5设置 - 这是必要的吗？我只是把它扔在那里，you'll have to decide
类型，你正在使用商店的确实是一个数组存储，所以我改变了类型
我改变你使用“新”来创建方法， which is advised in Ext JS
我删除了一些属性，你在的地方，以简化通过各种手段的代码 - 在你现在有一个工作的例子
重要的是添加这些回了，你应该确保你提供匹配的数据的数据你是相互的预设，您正在使用的记录模型以及您要馈送的网格列。为了简化事情，我删除了您的阅读器（并非特别需要定义给定的简单设置），因此您只需将商店中指定的字段映射到网格中想要的任何列。

来源

2013-11-01 09:54:41 SW4

我已经经历了我的错误。非常感谢这么好的解释。这将有助于我的未来。 – insanity

网格显示在Ext JS中

回答

相关问题