ext js сетка пример

Во-первых, извините за мой не очень хороший английский.ext js сетка пример

Задача: Мне нужно запустить ExtJS Grid с помощью php. На данный момент я хочу хотя бы запустить ext js grid (без генерации json с php-скриптом).

Btw, я использовал эту статью в этом примере: http://extjstutorial.info/extjs-tutorial-paging-grid-with-php-and-mysql/24

Я скачал Ext JS библиотеку, распаковали его к корневой директории моего сайта:/открытый/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>

Созданный файл «массив grid.js» в/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 реп)

Он говорит: Ссылка ошибка: Ext не определен.

В чем проблема? Помогите мне решить эту проблему :)

Все пути верны! Я могу проверить содержимое файлов именно в firebug (так что пути хорошие, иначе я бы ничего не видел)

Спасибо.

источник

2013-12-07 Sharikov Vladislav

Хорошо, теперь ответ! я должен включать в себя 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>

Я использую 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>

Check приказ. База была включена 2-й в zf2, но в источнике ее 1-й. Они поменялись местами. Проблема была.

источник

2013-12-07 15:33:39

Существует одна быстрая вещь. вы передали другой идентификатор методу визуализации.

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

и в вашем html вы установили свой идентификатор в «пейджинговую сетку».

попробуйте сопоставить два идентификатора, чтобы вы не получили ошибку ссылки на dom.

источник

2013-12-07 05:51:40 djmm187

-1, ext-base всегда должен быть перед ext-all. –

@EvanTrimboli - ext-all включает в себя ext-base. не было бы лишним? – djmm187

В него не входят ext-base. –

Возможно, ваша библиотека ExtJS находится в неправильном месте, потому что есть ошибка «Ext не определена».

источник

2013-12-07 09:31:22

Спасибо за ответ. Я думаю об этом. Но посмотрите там: http://habrastorage.org/storage3/5df/b8d/537/5dfb8d537d9f853771f38b5111aabb20.png, я могу посмотреть содержимое файла firebug, так что он работает. Кроме того, если я нажимаю RMB на странице, «показываю исходный код» и нажимаю ссылку ext-base или ext-all, браузер будет показывать коды, а не 404. Таким образом, это нормально с путями. Правильно? –

Шариков,

Все нормально, я просто скопировал свой код и пробовал сам, он отлично работает.

Оформить заказ (двойное и тройное) имя папки, файлов и путей (это факт, что код работает).

Код действительно работает.

источник

2013-12-07 14:10:58

Ty для вашего ответа. Btw firstname - Владислав: D Очень странно. Какой у вас браузер? какую версию вы использовали? Я использовал 3.4, загруженный с sencha.com, эта ссылка: http://www.sencha.com/products/extjs/download/ –

Проверенные ссылки еще раз. Все ссылки в порядке. –

Я использую Chrome, с ExtJs 4.2.1 (ext-base.js дает мне 404 в этом относительном местоположении), в любом случае я вижу рендеринг сетки. Есть ли какая-то особая причина для использования 3.4? Мне нравится MVC Ext4. –

ext js сетка пример

ответ

Смежные вопросы