1

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

问题：我需要用 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>

之后，当我尝试加载页面时没有任何反应，网格没有显示。Firebug 说： http ://habrastorage.org/storage3/ea4/a4e/2db/ea4a4e2dbb96c76c700be49293d49c10.png （无法上传图片，因为 <10 rep）

它说：参考错误：未定义分机。

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

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

谢谢你。

4

4 回答 4

1

沙里科夫，

一切都很好，我只是复制了您的代码并自己尝试了它，它工作正常。

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

代码确实有效。

于 2013-12-07T14:10:58.247 回答
1

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

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

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

尝试匹配这两个 ID，这样您就不会收到 dom 引用错误。

于 2013-12-07T05:51:40.897 回答
0

好的，现在答案！我应该包括 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>

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

于 2013-12-07T15:33:39.280 回答
0

您的 ExtJS 库可能位于错误的位置，因为出现“未定义 Ext”错误。

于 2013-12-07T09:31:22.223 回答