Question

首先，抱歉我的英语不是很好。

问题：我需要用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 （无法上传图片，因为＆lt; 10 rep）

它说：参考错误：未定义Ext。

问题是什么？请帮我解决一下：）

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

谢谢。

Answer 1

有一个快速的事情。您已将不同的ID传递给render方法。

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

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

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

Answer 2

Sharikov，

一切都很好，我只是复制了你的代码并且自己尝试了，它运行正常。

Checkout（double和triple）文件夹，文件和路径的名称（这是代码工作的事实）。

代码确实有效。

Answer 3

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

Answer 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，必须像这样包含lib：

<?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中排名第二，但在源头排名第一。他们交换了来源。有问题。

ext js网格示例

4 个答案: