Ext Js中的网格显示
[英]Grid Display in Ext Js
问题描述
I am trying to run this following code in ext-4.2.1.883 but i am not getting any error 
我正在尝试在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>
but when i try to run it in browser nothing is shown. 但是当我尝试在浏览器中运行它时，什么也没有显示。 please help 请帮忙
1 个解决方案
解决方案1
1 已采纳 2013-11-01 09: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?
更改页面以使用HTML5设置-这是必要的吗？ 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
我将您对“ new”的使用更改为create方法， 这在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. 为简化起见，我删除了阅读器（对于给定的这种简单设置而言，并不需要特别定义），因此仅将商店中指定的字段映射到网格中所需的任何列。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.