ExtJS: Простой просмотрщик файлов

ExtJS содержит много крупных компонентов, которые могут помочь построить мощное веб-приложение, похожее на настольное приложение. В этом уроке, я хочу показать, как создать очень простой просмотрщик файлов на ExtJS и PHP.

sourse

С самого начала, я бы хотел сказать о некоторых ограничениях. Первый раз я запустил этот скрипт на XAMPP на моём локальном хосте. Скрипту требуется некоторое количество времени, чтобы просканировать директории и воссоздать соответствующую структуру. В навигаторе появятся папки и файлы, которые присутствуют у вас на локальном хосте.

ExtJS

Контейнер представляет собой окно, разделённое на две части - treePanel и gridPanel, gridPanel загружает информацию динамически, trigerred - только при клике на какую-то папку из предыдущего окна.

Ext.onReady(function() {
    store_dir = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get_dir.php'
        }
    });

    tree_dir = Ext.create('Ext.tree.Panel', {
        title: 'Localhost Directory',
        rootVisible: false,
        store: store_dir,
        split: true,
        region: 'west',
        collapsible: true,
        floatable: false,
        width: 200,
        useArrows: true,
        listeners: {
            itemclick: {
                fn: function(view, record, item, index, event) {
                    store_file.load({
                        url: 'get_file.php?dir=' + record.data.id
                    });

                    nodeId = record.data.id;
                    htmlId = item.id;
                }
            }

        }
    });

    Ext.define('File', {
       extend: 'Ext.data.Model',
       fields: ['filename', 'filesize', 'filedate']
    });

    store_file = Ext.create('Ext.data.Store', {
        model: 'File',
        proxy: {
          type: 'ajax',
          url: 'get_file.php',
          reader: {
              type: 'json',
              root: 'files'
          }
        }
    });

    grid_file = Ext.create('Ext.grid.Panel', {
        title: 'File List',
        region: 'center',
        store: store_file,
        columns: [
            { header: 'Name', width: 170, dataIndex: 'filename' },
            { header: 'Size', width: 100, dataIndex: 'filesize' },
            { header: 'Last Modified', width: 200, dataIndex: 'filedate' }
        ],
        viewConfig: {
            stripeRows: true
        }
    });

    win = Ext.create('widget.window', {
        title: 'ExtJS Simple File Browser',
        width: 700,
        height: 400,
        layout: 'border',
        bodyStyle: 'padding: 5px;',
        items: [tree_dir, grid_file]
    });

    win.show();
});

PHP (get_dir.php)

Этот файл служит для того, чтобы просканировать папку htdocs (если у вас XAMPP) , используя $ _SERVER переменную ['DOCUMENT_ROOT']. Если у вас в htdocs много папок, то процесс может затянуться. В этом php файле я использовал рекурсивную функцию, чтобы получить все каталоги и подкаталоги. Результат оформляю как json и отправляю основному файлу.

<?php

class MyDirectory {

    public $json = '[';

    public function get_children($dir, $child) {
        $dh = opendir($dir);
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    // must be checked if this folder have other subfolder
                    if ($this->count_sub_dir($dir . $file . '/') == 0) {
                        $this->json .= '{text:"'.$file.'", leaf: true, id: "'.$dir . $file.'"},';
                    } else {
                        $this->json .= '{text:"'.$file.'", id: "'.$dir . $file.'", children: [';
                        $this->get_children($dir . $file . '/', true);
                    }
                }
            }
        }
        if ($child) {
            $this->json .=  ']},';
        }
        closedir($dh);
    }

    public function count_sub_dir($dir) {
        $dh = opendir($dir);
        $countdir = 0;
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    $countdir++;
                }
            }
        }
        closedir($dh);
        return $countdir;
    }
}

$host_dir = $_SERVER['DOCUMENT_ROOT']."/";

$dir = new MyDirectory();

$dir->get_children($host_dir, false);

$dir->json .= ']';
$dir->json = str_replace(",]", "]", $dir->json);

echo($dir->json);

?>

PHP (get_file.php)

В этом файле происходит сбор данных о файлах.

<?php

$dir = $_GET['dir'] . "/";

$dh = opendir($dir);
$files = array();
while (($file = readdir($dh)) !== false) {
    if ($file != '.' AND $file != '..' ) {
        if (filetype($dir . $file) == 'file') {
            $files[] = array(
                'filename' => $file,
                'filesize' => filesize($dir . $file). ' bytes',
                'filedate' => date("F d Y H:i:s", filemtime($dir . $file))
            );
        }
    }
}
closedir($dh);

echo(json_encode(array('files' => $files)));

?>

Я думаю, что этот урок может вам пригодиться, тем более полигон для работ довольно-таки крупный: к примеру, вы можете расширить функциональность скрипта и добавить возможность создания, редактирования, удаления файлов, и т.д.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.superdit.com/2011/06/01/extjs-simple-file-browser/
Перевел: Станислав Протасевич
Урок создан: 25 Июня 2011
Просмотров: 32262
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^