ext js grid example

1
votes

Firstly, sorry for my not very good english.

Problem: I need to run ExtJS Grid with php. At the moment I want to run ext js grid at least (without generating json with php script).

Btw, I used this article in this example: 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/. 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:

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)

It says: Reference error: Ext is not defined.

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)

Thank you.

4
extjsgridreferenceerror

4 Answers

1
votes

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.

1
votes

There is one quick thing. you have passed a different ID to the render method. 

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

and in your html, you have set your id to "paging-grid".

try matching the two IDs so you won't get a dom reference error.

0
votes

Your ExtJS library may be at the wrong place because there is Error "Ext is not defined".

0
votes

Ok, now the answer! I should include 2 extJS libs:

<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:

<?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. They swapped in source. There was the problem.