ext js 网格示例答案

【问题标题】：ext js grid exampleext js 网格示例
【发布时间】：2013-12-07 00:41:35
【问题描述】：

首先，对不起我的英语不太好。

问题：我需要用 php 运行 ExtJS Grid。目前我想至少运行 ext js 网格（不使用 php 脚本生成 json）。

顺便说一句，我在这个例子中使用了这篇文章： http://extjstutorial.info/extjs-tutorial-paging-grid-with-php-and-mysql/24

我下载了 ext js 库，将其解压缩到我网站的根目录：/public/extjs/。之后，我在此脚本所需的文件部分中包含：

<head>
...
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/array-grid.js"></script>
...
</head>

在 /js/ 中创建了文件“array-grid.js”，内容如下：

Ext.onReady (function () {
var sampleData = [
    [1,'Monkey D Luffy','Captain','I will become the pirate king'],
    [2,'Roronoa Zoro','Swordman','Become the greatest swordman'],
    [3,'Sanji','Cook','Find all blue'],
    [4,'Usopp','Sniper','Become the greatest warrior'],
    [5,'Nami','Navigator','Draw map of the world']
];

// create the data store
var store = new Ext.data.SimpleStore({
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name'},
        {name: 'position'},
        {name: 'ambition'}
    ]
});

// load data

store.loadData(sampleData);

// create the grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'id'},
        {header: 'Name', width: 100, dataIndex: 'name'},
        {header: 'Position', width: 100, dataIndex: 'position'},
        {header: 'Ambition', width: 250, dataIndex: 'ambition'}
    ],
    stripeRows: true,
    height:180,
    width:500,
    title:'Straw Hats Crew'
});

// render grid to the grid-example element (see p array-grid.html)
grid.render('grid-example');        
});

在视图中添加：

<div id="grid-example"></div>

在那之后，当我尝试加载页面时没有任何反应，网格没有显示。萤火虫这样说： http://habrastorage.org/storage3/ea4/a4e/2db/ea4a4e2dbb96c76c700be49293d49c10.png （无法上传图片，因为

它说：引用错误：未定义分机。

有什么问题？请帮我解决它:)

所有路径都是正确的！我可以在 firebug 中准确检查文件内容（所以路径很好，否则我什么都看不到）

谢谢。

【问题讨论】：

标签： extjs grid referenceerror

【解决方案1】：

沙里科夫，

一切都很好，我只是复制了您的代码并自己尝试过，效果很好。

结帐（双倍和三倍）文件夹、文件和路径的名称（这是代码有效的事实）。

代码确实有效。

【讨论】：

回答您的问题。顺便说一句，名字是 Vladislav :D 很奇怪。你有什么浏览器？你用的是什么版本？我用的是从 sencha.com 下载的 3.4，这个链接：sencha.com/products/extjs/download
再次检查链接。所有链接都很好。
我正在使用 Chrome，ExtJs 4.2.1（ext-base.js 在那个相对位置确实给了我 404）无论如何我看到渲染了网格。使用 3.4 有什么特殊原因吗？我喜欢 Ext4 的 MVC。
不。我刚刚点击下载，他们给了我 3.4.0 的链接。啊，记得我试过4.2.1，但是文件和文件夹有新的结构，所以我回滚到3.4.0。这就是为什么3.4。顺便说一句，chrome 不会显示任何错误，但 FireFox 会。
1.- 相信我转到 Ext4 版本你会喜欢的。 2.- 所以它确实在 chrome 中呈现，或者它只是没有显示任何错误？

【解决方案2】：

有一件事很快。您已将不同的 ID 传递给 render 方法。

`grid.render('grid-example');`

在您的 html 中，您已将 id 设置为“paging-grid”。

尝试匹配这两个 ID，这样就不会出现 dom 引用错误。

【讨论】：

@EvanTrimboli - ext-all 包括 ext-base。这不是多余的吗？
不包括 ext-base。
哦！我的坏，对不起，有点失败。 html代码没问题。 id 是'grid-example'，我从另一个页面复制粘贴，对不起。 html 中的 id 和参数中的 id 相等。

【解决方案3】：

您的 ExtJS 库可能位于错误的位置，因为出现错误“Ext is not defined”。

【讨论】：

感谢您的回答。是的，我考虑一下。但是看那里：habrastorage.org/storage3/5df/b8d/537/…，我可以查看文件 throw firebug 的内容，所以它可以工作。另外，如果我在页面上按人民币，“显示源代码”并单击链接 ext-base 或 ext-all，浏览器将显示代码，而不是 404。所以它可以使用路径。对吗？

【解决方案4】：

好的，现在是答案！我应该包括 2 个 extJS 库：

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

我使用的是 ZF2，必须像这样包含库：

<?php echo $this->headScript()
    ->prependFile($this->basePath() . '/extjs/ext-all.js')
    ->prependFile($this->basePath() . '/extjs/adapter/ext/ext-base.js')
?>

在代码中它看起来像：

<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>

检查订单。 Base 在 zf2 中排名第二，但在源代码中排名第一。他们交换了来源。有问题。

【讨论】：