ext js网格示例
[英]ext js grid example
问题描述
Firstly, sorry for my not very good english. 
首先，对不起我的英语不好。
Problem: I need to run ExtJS Grid with php. 问题：我需要使用php运行ExtJS Grid。 At the moment I want to run ext js grid at least (without generating json with php script). 目前，我至少要运行ext js网格（不使用php脚本生成json）。
Btw, I used this article in this example: http://extjstutorial.info/extjs-tutorial-paging-grid-with-php-and-mysql/24 顺便说一句，我在此示例中使用了这篇文章： http : //extjstutorial.info/extjs-tutorial-paging-grid-with-php-and-mysql/24
I downloaded ext js library, unpacked it to root dir of my site: /public/extjs/. 我下载了ext js库，将其解压缩到我的站点的根目录：/ public / extjs /。 After that I included in section required files for this script: 之后，我在此脚本的必需文件部分中添加了此文件：
<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>
Created file 'array-grid.js' in /js/ with this content: 在/ 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');
});
Added in view this: 鉴于此添加：
<div id="grid-example"></div>
After that , when I tried to load page nothing happened, grid wasn't displayed. 之后，当我尝试加载页面时，没有任何反应，没有显示网格。 Firebug says this: http://habrastorage.org/storage3/ea4/a4e/2db/ea4a4e2dbb96c76c700be49293d49c10.png (can't upload images because <10 rep) Firebug这样说： http : //habrastorage.org/storage3/ea4/a4e/2db/ea4a4e2dbb96c76c700be49293d49c10.png （由于<10个重复而无法上传图片）
It says: Reference error: Ext is not defined. 它说：参考错误：未定义Ext。
Whats the problem? 有什么问题？ Please, help me to solve it :) 请帮我解决这个问题:)
All paths are right! 所有路径都是正确的！ I can check files content exactly in firebug (so paths are good, otherwise I wouldn't have seen anything) 我可以在Firebug中准确地检查文件内容（因此路径很好，否则我什么都看不到）
Thank you. 谢谢。
4 个解决方案
解决方案1
1 2013-12-07 05:51:40
There is one quick thing. 有一件简单的事情。 you have passed a different ID to the render method. 您已将其他ID传递给render方法。
`grid.render('grid-example');`
and in your html, you have set your id to "paging-grid". 并在您的html中，将ID设置为“ paging-grid”。
try matching the two IDs so you won't get a dom reference error. 请尝试匹配两个ID，以免出现dom引用错误。
解决方案2
1 2013-12-07 14:10:58
Sharikov, Sharikov，
Everything is just fine, I just copied your code and tried it myself, it works fine. 一切都很好，我只是复制了您的代码， 然后自己尝试了一下，效果很好。
Checkout(double and triple) the name of the folders, files and the paths (it is a fact that the code works). 检出（两次和三次）文件夹，文件和路径的名称（这是代码有效的事实）。
Code does work. 代码确实有效。
解决方案3
0 2013-12-07 09:31:22
您的ExtJS库可能位于错误的位置，因为出现错误“未定义Ext”。
解决方案4
0 已采纳 2013-12-07 15:33:39
Ok, now the answer! 好了，现在答案！ I should include 2 extJS libs: 我应该包括2个extJS库：
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
I am using ZF2 and libs must be included like this: 我正在使用ZF2，必须这样包含libs：
<?php echo $this->headScript()
->prependFile($this->basePath() . '/extjs/ext-all.js')
->prependFile($this->basePath() . '/extjs/adapter/ext/ext-base.js')
?>
and in code it will look like: 在代码中，它看起来像：
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
Check the order. 检查订单。 Base was included 2nd in zf2, but in source its 1st. 在zf2中，Base包含第二名，但在源代码中则包含1st。 They swapped in source. 他们交换了来源。 There was the problem. 有问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.