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

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

С самого начала, я бы хотел сказать о некоторых ограничениях. Первый раз я запустил этот скрипт на 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)));

?>

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GnJUyppIwT0/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

ExtJS: Простой просмотрщик файлов | | 2012-06-19 12:06:56 | | Статьи Web-мастеру | | ExtJS содержит много крупных компонентов, которые могут помочь построить мощное веб-приложение, похожее на настольное приложение. В этом уроке, я хочу показать, как создать очень простой просмотрщик | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: