7. Ext JS - Расширенная сетка

Последнее обновление Dec 5th, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

Ext JS может сэкономить нам время, обрабатывая форматирование таблиц. Но Ext JS Grid - это больше, чем простая таблица: Ext JS Grid может содержать сортируемые столбцы и разбивать длинные наборы результатов на страницы или позволять пользователям выбирать строки. Ext JS Grid делает много вещей, которых нет в базовой HTML-таблице. Итак, как мы можем что-нибудь с этим сделать?

Для Ext JS Grid обычно требуется 2 страницы:

Страница для отображения сетки (это очевидная страница, о которой вы уже думали)
Динамическая страница PHP для запроса данных, которые заполняют таблицу (называется «хранилище»)

Страница сетки¶

Это может быть простая HTML-страница. В нашем примере мы помещаем ее вместе с файлом MODX index.php в ваш документ. Как и во всех предыдущих примерах, мы включили CSS и JavaScript файлы Ext JS.

<html>
    <title>Сетка Ext JS с постраничным разбиением</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

Ext.onReady(function(){

    // Создать хранилище данных
    var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'total',
        idProperty: 'id',
        remoteSort: true,

        // Определить поля, которые мы хотим показать
        fields: [
            'pagetitle',
            'alias',
            {name: 'createdby', type: 'int'}
        ],

        // Использовать HttpProxy для локального хранилища, ScriptTagProxy для удаленных хранилищ
        proxy: new Ext.data.HttpProxy({
            url: 'store.php'
        })
    });
    store.setDefaultSort('id', 'ASC');


    var grid = new Ext.grid.GridPanel({
        width:700,
        height:500,
        title:'MODExt - просмотр страниц',
        store: store,
        trackMouseOver:true,  // Подсветит строки при наведении курсора мыши
        disableSelection:true, // Позволит вам выбрать строку(и)
        loadMask: true,  // Сгенерирует крутящуюся иконку

        // Колонки сетки
        columns:[{
            header: "Заголовок страницы",
            dataIndex: 'pagetitle',
            width: 420,
            sortable: true
        },{
            header: "Псевдоним",
            dataIndex: 'alias',
            width: 100,
            sortable: true
        },{
            header: "Автор",
            dataIndex: 'createdby',
            width: 80,
            align: 'right',
            sortable: true
        }],

        // Панель постраничного разбиения внизу
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Отображаются записи {0} - {1} из {2}',
            emptyMsg: "Нет записей для отображения"
        })
    });

    // Отобразить сетку
    grid.render('topic-grid');

    // Запустить загрузку локального хранилища
    // ПРИМЕЧАНИЕ: имена параметров здесь соответствуют ключам в массиве $_POST
    store.load({params:{start:0, limit:25}});
});
    </script>

    <body>
        <h1>Продвинутая сетка</h1>
        <div id="topic-grid"></div>
    </body>
</html>

Магазин¶

Это файл PHP или сниппет - мы помещаем его вместе с файлом MODX index.php, поэтому нам необходимо добавить несколько дополнительных строк, чтобы получить доступ к объекту $modx. Обычно этот код находится в сниппете или в CMP, поэтому у вас уже есть доступ к объекту $modx.

<?php
// -- начало маленького хака -------------------
// Это было бы не нужно, если бы данный код был
// внутри сниппета или менеджера MODX! Только для демонстрационных целей!
define('MODX_API_MODE', true);
require_once 'index.php';
$modx= new modX();
$modx->initialize('mgr');
// -- конец маленького хака ---------------------

// Получить параметры, отправленные из управляющих элементов сетки
// Параметры ограничения и начала настраиваются,
// но сортировка и направление несколько менее (?)
$limit = (int) $modx->getOption('limit',$_POST,10);
$start = (int) $modx->getOption('start',$_POST,0);
$sort = $modx->getOption('sort',$_POST,'id');
$dir = $modx->getOption('dir',$_POST,'ASC');

$criteria = $modx->newQuery('modResource');
$total_pages = $modx->getCount('modResource',$criteria);
$criteria->limit($limit, $start);
$criteria->sortby($sort,$dir);
$pages = $modx->getCollection('modResource',$criteria);

// Инициализируем наш массив
$data = array(
    'results'=>array(),
    'total' => $total_pages,
);
foreach ($pages as $p) {
    $data['results'][] = $p->toArray();
}
// Используем лог для отладки Ajax
$modx->log(1,print_r($_POST,true));
print json_encode($data);

/*КОНЕЦ ФАЙЛА*/

Просматривая файл store.php в браузере, вы должны увидеть некоторые данные JSON. Если вы пытаетесь увидеть, что публикуется в этом файле на странице таблицы, используйте функцию логгирования MODX для регистрации опубликованных данных.

Смотрите также¶