--- /dev/null
+++ typo3/sysext/filelist/classes/class.tx_filelist_backendhook.php
@@ -0,0 +1,22 @@
+<?php 
+/**
+ * backend post construct hook
+ * @author pekue
+ *
+ */
+class tx_filelist_backendhook {
+	/**
+	 * adds a part of the extjs filelist module to the global
+	 * framework if fal is loaded to be used in fal references
+	 * tce forms upload dialog
+	 * @param unknown_type $params
+	 * @param TYPO3backend $parentObject
+	 */
+	function constructPostProcess($params, TYPO3backend $parentObject) {
+		/** @var t3lib_PageRenderer $pageRenderer */
+		$pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer();;
+		$pageRenderer->addJsFile('ajax.php?ajaxID=ExtDirect::getAPI&namespace=TYPO3.FILELIST', NULL, FALSE);
+		$pageRenderer->addJsFile(t3lib_extMgm::extRelPath('filelist').'res/js/FolderTree/FolderTree.js');
+	}
+}
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/classes/class.tx_filelist_dataprovider.php
@@ -0,0 +1,54 @@
+<?php
+
+class tx_filelist_DataProvider {
+	 
+	/** genereates a file tree
+	 *
+	 * @param object $parameter
+	 * @return array
+	 */
+	public function getExtFileTree($parameter) {
+		$ext = array();
+		if($parameter->node === 'FILE_MOUNTS'){
+			$path = PATH_site . 'fileadmin';
+		}else{
+			$path = $parameter->node; 
+		}
+		$fileArray = array();
+		$dirs = t3lib_div::get_dirs($path);
+		foreach ($dirs as $dir) {
+			$subDirs = t3lib_div::get_dirs($path . '/' . $dir);
+			if ($dir{0} !== '.') {
+				$fileArray[] = array(
+					'id' => $path . '/' . $dir,
+					'text' => htmlspecialchars($dir),
+					//'leaf' => count($subDirs) == 0,
+					'leaf' => false,
+					'qtip' => '',
+					'iconCls' => 't3-icon t3-icon-apps t3-icon-apps-filetree t3-icon-filetree-folder-temp'
+				);
+			}
+		}
+		return $fileArray;
+	}
+	
+	public function getAllInPath($parameters){
+		$files = t3lib_div::getFilesInDir($parameters->path, '', FALSE, '', '');
+		$filesArray = array();
+		foreach ($files as $file) {
+			$pI = pathinfo($file);
+			$filesArray[] = array(
+				'file_name' => $file,
+				'file_size' => filesize($parameters->path.'/'.$file),
+				'file_mtime' => filemtime($parameters->path.'/'.$file),
+				'file_type' => $pI['extension']
+			);
+		}
+		return $filesArray;
+		fb($files);
+		$files = t3lib_file_Repository::getAllInPath($parameters->path);
+	}
+	
+}
+
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/classes/class.tx_filelist_registry.php
@@ -0,0 +1,26 @@
+<?php
+
+final class tx_filelist_Registry {
+	
+	public static function registerJsComponent($filename){
+		global $TYPO3_CONF_VARS;
+			if (substr($filename,0,4)=='EXT:')	{	// extension
+				list($extKey,$local) = explode('/',substr($filename,4),2);
+				$filename='';
+				if (strcmp($extKey,'') && t3lib_extMgm::isLoaded($extKey) && strcmp($local,''))	{
+					$filename = t3lib_extMgm::extRelPath($extKey).$local;
+				}
+			}
+			if($filename!=''){
+				$TYPO3_CONF_VARS['EXTCONF']['filelist']['jsComponents'][]=$filename;
+			}
+	}
+	
+	public static function registerExtDirectNamespace($ns){
+		global $TYPO3_CONF_VARS;
+		$TYPO3_CONF_VARS['EXTCONF']['filelist']['extDirectNamespaces'][]=$ns;
+	}
+	
+}
+
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/ext_autoload.php
@@ -0,0 +1,6 @@
+<?php
+return array(
+	'tx_filelist_registry' => t3lib_extMgm::extPath('filelist', 'classes/class.tx_filelist_registry.php'),
+);
+
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/ext_conf_template.txt
@@ -0,0 +1,2 @@
+# cat=basic//; type=boolean; label=Enable alternative File List Module: When turned on and the File Abstraction Layer is enabled as well, the new ExtJs-based alternative for the filelist module will be shown. The module is in an alpha version state but distributed as a companion for FAL.
+enableModExtJs = 0
--- /dev/null
+++ typo3/sysext/filelist/ext_localconf.php
@@ -0,0 +1,16 @@
+<?php 
+	$extConf = unserialize($GLOBALS['TYPO3_CONF_VARS']['EXT']['extConf']['filelist']);
+	if(t3lib_extMgm::isLoaded('fal')){
+		$TYPO3_CONF_VARS['SC_OPTIONS']['ExtDirect']['TYPO3.FILELIST.ExtDirect'] = 'EXT:filelist/classes/class.tx_filelist_dataprovider.php:tx_filelist_DataProvider';
+		$TYPO3_CONF_VARS['SC_OPTIONS']['typo3/backend.php']['constructPostProcess'][] = 'EXT:filelist/classes/class.tx_filelist_backendhook.php:tx_filelist_backendhook->constructPostProcess';
+	} 
+	if($extConf['enableModExtJs'] == 1 && t3lib_extMgm::isLoaded('fal')){
+		tx_filelist_Registry::registerExtDirectNamespace('TYPO3.FILELIST');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/DetailView/Bootstrap.js');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/DetailView/DetailView.js');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/FolderTree/Bootstrap.js');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/FolderTree/FolderTree.js');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/FileList/Bootstrap.js');
+		tx_filelist_Registry::registerJsComponent('EXT:filelist/res/js/FileList/FileList.js');
+	}
+?>
\ No newline at end of file
--- typo3/sysext/filelist/ext_tables.php
+++ typo3/sysext/filelist/ext_tables.php
@@ -5,5 +5,10 @@ if (!defined ('TYPO3_MODE')) {
 
 if (TYPO3_MODE === 'BE') {
 	t3lib_extMgm::addModule('file', 'list', '', t3lib_extMgm::extPath($_EXTKEY) . 'mod1/');
+	$extConf = unserialize($GLOBALS['TYPO3_CONF_VARS']['EXT']['extConf']['filelist']);
+	if($extConf['enableModExtJs'] == 1 && t3lib_extMgm::isLoaded('fal')){
+		t3lib_extMgm::addModulePath('txfilelistMExtjs', t3lib_extMgm::extPath($_EXTKEY) . 'mod_extjs/');
+		t3lib_extMgm::addModule('txfilelistMExtjs', '', '', t3lib_extMgm::extPath($_EXTKEY) . 'mod_extjs/');
+	}
 }
 ?>
\ No newline at end of file
--- typo3/sysext/filelist/mod1/file_list.php
+++ typo3/sysext/filelist/mod1/file_list.php
@@ -166,7 +166,8 @@ class SC_file_list {
 		$this->doc->backPath = $BACK_PATH;
 		$this->doc->setModuleTemplate('templates/file_list.html');
 		$this->doc->getPageRenderer()->loadPrototype();
-
+		$this->doc->getPageRenderer()->loadExtJS();
+		
 			// Validating the input "id" (the path, directory!) and checking it against the mounts of the user.
 		$this->id = $this->basicFF->is_directory($this->id);
 		$access = $this->id && $this->basicFF->checkPathAgainstMounts($this->id.'/');
@@ -175,64 +176,12 @@ class SC_file_list {
 		if ($access)	{
 				// include the initialization for the flash uploader
 			if ($GLOBALS['BE_USER']->uc['enableFlashUploader']) {
-
-				$this->doc->JScodeArray['flashUploader'] = '
-					if (top.TYPO3.FileUploadWindow.isFlashAvailable()) {
-						document.observe("dom:loaded", function() {
-								// monitor the button
-							$("button-upload").observe("click", initFlashUploader);
-
-							function initFlashUploader(event) {
-									// set the page specific options for the flashUploader
-								var flashUploadOptions = {
-									uploadURL:           top.TS.PATH_typo3 + "ajax.php",
-									uploadFileSizeLimit: "' . t3lib_div::getMaxUploadFileSize() . '",
-									uploadFileTypes: {
-										allow:  "' . $GLOBALS['TYPO3_CONF_VARS']['BE']['fileExtensions']['webspace']['allow'] . '",
-										deny: "' . $GLOBALS['TYPO3_CONF_VARS']['BE']['fileExtensions']['webspace']['deny'] . '"
-									},
-									uploadFilePostName:  "upload_1",
-									uploadPostParams: {
-										"file[upload][1][target]": "' . $this->id . '",
-										"file[upload][1][data]": 1,
-										"file[upload][1][charset]": "utf-8",
-										"ajaxID": "TYPO3_tcefile::process"
-									}
-								};
-
-									// get the flashUploaderWindow instance from the parent frame
-								var flashUploader = top.TYPO3.FileUploadWindow.getInstance(flashUploadOptions);
-								// add an additional function inside the container to show the checkbox option
-								var infoComponent = new top.Ext.Panel({
-									autoEl: { tag: "div" },
-									height: "auto",
-									bodyBorder: false,
-									border: false,
-									hideBorders: true,
-									cls: "t3-upload-window-infopanel",
-									id: "t3-upload-window-infopanel-addition",
-									html: \'<label for="overrideExistingFilesCheckbox"><input id="overrideExistingFilesCheckbox" type="checkbox" onclick="setFlashPostOptionOverwriteExistingFiles(this);" />\' + top.String.format(top.TYPO3.LLL.fileUpload.infoComponentOverrideFiles) + \'</label>\'
-								});
-								flashUploader.add(infoComponent);
-
-									// do a reload of this frame once all uploads are done
-								flashUploader.on("totalcomplete", function() {
-									window.location.reload();
-								});
-
-									// this is the callback function that delivers the additional post parameter to the flash application
-								top.setFlashPostOptionOverwriteExistingFiles = function(checkbox) {
-									var uploader = top.TYPO3.getInstance("FileUploadWindow");
-									if (uploader.isVisible()) {
-										uploader.swf.addPostParam("overwriteExistingFiles", (checkbox.checked == true ? 1 : 0));
-									}
-								};
-
-								event.stop();
-							};
-						});
-					}
-				';
+				$this->doc->getPageRenderer()->addExtOnReadyCode("
+					Ext.get(Ext.getDom('button-upload')).on('click',function(e){
+						e.stopEvent();
+						top.TYPO3.FileUploadWindow.showFilelistUploadDialog('" . $this->id . "');
+					});
+				");
 			}
 				// Create filelisting object
 			$this->filelist = t3lib_div::makeInstance('fileList');
--- /dev/null
+++ typo3/sysext/filelist/mod_extjs/conf.php
@@ -0,0 +1,11 @@
+<?php
+
+	// DO NOT REMOVE OR CHANGE THESE 2 LINES:
+$MCONF['name'] = 'txfilelistMExtjs';
+$MCONF['script'] = '_DISPATCH';
+	
+$MCONF['access'] = 'user,group';
+
+$MLANG['default']['tabs_images']['tab'] = 'list.gif';
+$MLANG['default']['ll_ref'] = 'LLL:EXT:filelist/mod_extjs/locallang_mod.xml';
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/mod_extjs/index.php
@@ -0,0 +1,123 @@
+<?php
+/***************************************************************
+*  Copyright notice
+*
+*  (c) 2010  <>
+*  All rights reserved
+*
+*  This script is part of the TYPO3 project. The TYPO3 project is
+*  free software; you can redistribute it and/or modify
+*  it under the terms of the GNU General Public License as published by
+*  the Free Software Foundation; either version 2 of the License, or
+*  (at your option) any later version.
+*
+*  The GNU General Public License can be found at
+*  http://www.gnu.org/copyleft/gpl.html.
+*
+*  This script is distributed in the hope that it will be useful,
+*  but WITHOUT ANY WARRANTY; without even the implied warranty of
+*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*  GNU General Public License for more details.
+*
+*  This copyright notice MUST APPEAR in all copies of the script!
+***************************************************************/
+/**
+ * [CLASS/FUNCTION INDEX of SCRIPT]
+ *
+ * Hint: use extdeveval to insert/update function index above.
+ */
+
+
+$LANG->includeLLFile('EXT:filelist/mod_extjs/locallang.xml');
+require_once(PATH_t3lib . 'class.t3lib_scbase.php');
+$BE_USER->modAccess($MCONF,1);	// This checks permissions and exits if the users has no permission for entry.
+	// DEFAULT initialization of a module [END]
+
+
+
+/**
+ * Module 'ExtJS filelist' for the 'filelist' extension.
+ *
+ * @author	 Peter Kuehn <peter.kuehn@wmdb.de>
+ * @package	TYPO3
+ * @subpackage	core
+ */
+class  tx_filelist_modextjs extends t3lib_SCbase {
+
+	/**
+	 * Initializes the Module
+	 * @return	void
+	 */
+	function init()	{
+		global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;
+		parent::init();
+	}
+
+	/**
+	 * Main function of the module. Write the content to $this->content
+	 * If you chose "web" as main module, you will need to consider the $this->id parameter which will contain the uid-number of the page clicked in the page tree
+	 *
+	 * @return	[type]		...
+	 */
+	function main()	{
+		global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;
+
+			// initialize doc
+		$this->doc = t3lib_div::makeInstance('noDoc');
+		$this->doc->backPath = $BACK_PATH;
+		
+		$this->doc->getPageRenderer()->loadExtJS();
+		
+		$this->addJsFile(t3lib_extMgm::extRelPath('filelist') .'res/js/Application.js');
+		$this->addJsFile(t3lib_extMgm::extRelPath('filelist') .'res/js/ComponentRegistry.js');
+		if(is_array($TYPO3_CONF_VARS['EXTCONF']['filelist']['extDirectNamespaces'])){
+			foreach ($TYPO3_CONF_VARS['EXTCONF']['filelist']['extDirectNamespaces'] as $nameSpace) {
+				$this->addJsFile($this->backPath . 'ajax.php?ajaxID=ExtDirect::getAPI&namespace='.$nameSpace);
+			}
+			$this->doc->getPageRenderer()->addExtDirectCode();
+		}
+		
+		if(is_array($TYPO3_CONF_VARS['EXTCONF']['filelist']['jsComponents'])){
+			foreach ($TYPO3_CONF_VARS['EXTCONF']['filelist']['jsComponents'] as $filename) {
+				$this->addJsFile($filename);
+			}
+		}
+		
+		
+		//load components here!
+		
+		$this->addJsFile(t3lib_extMgm::extRelPath('filelist') .'res/js/Ui/Bootstrap.js');
+		$this->addJsFile(t3lib_extMgm::extRelPath('filelist') .'res/js/Ui/Ui.js');
+		
+		
+		// Build the <body> for the module
+		$this->content = $this->doc->startPage($LANG->getLL('title'));
+		$this->content.=$this->doc->endPage();
+		echo $this->content;
+	}
+	
+	private function addJsFile($fileName, $type = NULL, $compress = FALSE){
+		$this->doc->getPageRenderer()->addJsFile($fileName, $type, $compress);
+	}
+	
+}
+
+
+
+if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/filelist/mod_extjs/index.php'])	{
+	include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/filelist/mod_extjs/index.php']);
+}
+
+
+
+
+// Make instance:
+$SOBE = t3lib_div::makeInstance('tx_filelist_modextjs');
+$SOBE->init();
+
+// Include files?
+foreach($SOBE->include_once as $INC_FILE)	include_once($INC_FILE);
+
+$SOBE->main();
+
+?>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/mod_extjs/locallang.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<T3locallang>
+	<meta type="array">
+		<type>module</type>
+		<description>Language labels for module &quot;txfilelistMExtjs&quot;</description>
+	</meta>
+	<data type="array">
+		<languageKey index="default" type="array">
+			<label index="title">Filelist</label>
+			<label index="function1">Function #1</label>
+			<label index="function2">Function #2</label>
+			<label index="function3">Function #3</label>
+		</languageKey>
+	</data>
+</T3locallang>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/mod_extjs/locallang_mod.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<T3locallang>
+	<meta type="array">
+		<type>module</type>
+		<description>Language labels for module &quot;txfilelistMExtjs&quot; - header, description</description>
+	</meta>
+	<data type="array">
+		<languageKey index="default" type="array">
+			<label index="mlang_tabs_tab">ExtJS Filelist</label>
+			<label index="mlang_labels_tabdescr">ExtJS Filelist</label>
+			<label index="mlang_labels_tablabel">ExtJS Filelist</label>
+		</languageKey>
+	</data>
+</T3locallang>
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/mod_extjs/mod_template.html
@@ -0,0 +1,35 @@
+<!-- ###FULLDOC### begin -->
+<div class="typo3-fullDoc">
+	<!-- Page header with buttons, path details and csh -->
+	<div id="typo3-docheader">
+		<div id="typo3-docheader-row1">
+			<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
+			<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
+		</div>
+		<div id="typo3-docheader-row2">
+			<div class="docheader-row2-left"><div class="docheader-funcmenu">###FUNC_MENU###</div></div>
+			<div class="docheader-row2-right">###PAGEPATH######PAGEINFO###</div>
+		</div>
+	</div>
+	<!-- Content of module, for instance listing, info or editing -->
+	<div id="typo3-docbody">
+		<div id="typo3-inner-docbody">
+			###CONTENT###
+		</div>
+	</div>
+</div>
+<!-- ###FULLDOC### end -->
+
+<!-- Grouping the icons on top -->
+
+<!-- ###BUTTON_GROUP_WRAP### -->
+	<div class="buttongroup">###BUTTONS###</div>
+<!-- ###BUTTON_GROUP_WRAP### -->
+
+<!-- ###BUTTON_GROUPS_LEFT### -->
+<!-- ###BUTTON_GROUP1### -->###SAVE###<!-- ###BUTTON_GROUP1### -->
+<!-- ###BUTTON_GROUPS_LEFT### -->
+
+<!-- ###BUTTON_GROUPS_RIGHT### -->
+<!-- ###BUTTON_GROUP1### -->###SHORTCUT###<!-- ###BUTTON_GROUP1### -->
+<!-- ###BUTTON_GROUPS_RIGHT### -->
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/res/js/Application.js
@@ -0,0 +1,74 @@
+Ext.ns('TYPO3.Components.filelist');
+
+TYPO3.Components.filelist = Ext.apply(new Ext.util.Observable, {
+
+	/**
+	 * List of all bootstrap objects which have been registered
+	 * @private
+	 */
+	bootstrappers: [],
+
+	/**
+	 * Main bootstrap. This is called by Ext.onReady and calls all registered
+	 * bootstraps.
+	 *
+	 * This method is called automatically.
+	 */
+	bootstrap: function() {
+		this._registerDummyConsoleLogIfNeeded();
+		Ext.util.Observable.capture(this, this._eventDisplayCallback, this);
+		this._initializeConfiguration();
+		this._invokeBootstrappers();
+		Ext.QuickTips.init();
+		this.fireEvent('TYPO3.Components.filelist.afterBootstrap');
+	},
+
+	/**
+	 * Registers a new bootstrap class.
+	 */
+	registerBootstrap: function(bootstrap) {
+		this.bootstrappers.push(bootstrap);
+	},
+
+	/**
+	 * If the console is deactivated, install a dummy function to prevent errors.
+	 * @private
+	 */
+	_registerDummyConsoleLogIfNeeded: function() {
+		if (typeof window.console == 'undefined') {
+			window.console = {
+				log: function() {}
+			};
+		}
+	},
+
+	/**
+	 * Initialize the configuration object in .Configuration
+	 * @private
+	 */
+	_initializeConfiguration: function() {
+	},
+
+	/**
+	 * Invoke the registered bootstrappers.
+	 * @private
+	 */
+	_invokeBootstrappers: function() {
+		Ext.each(
+			this.bootstrappers,
+			function(bootstrapper) {
+				bootstrapper.initialize();
+			}
+		);
+	},
+
+	/**
+	 * This method is called for each event going through this event bridge.
+	 * @private
+	 */
+	_eventDisplayCallback: function() {
+		//console.log(arguments);
+	}
+});
+
+Ext.onReady(TYPO3.Components.filelist.bootstrap, TYPO3.Components.filelist);
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/res/js/ComponentRegistry.js
@@ -0,0 +1,16 @@
+Ext.ns("TYPO3.Components.filelist");
+
+TYPO3.Components.filelist.ComponentRegistry = Ext.apply(new Ext.util.Observable, {
+
+	items: {
+	  'north':[],
+	  'east':[],
+	  'south':[],
+	  'west':[],
+	  'center':[]
+	},
+
+	registerComponent: function(config) {
+		TYPO3.Components.filelist.ComponentRegistry.items[config.region].push(config.component);
+	}
+});
--- /dev/null
+++ typo3/sysext/filelist/res/js/DetailView/Bootstrap.js
@@ -0,0 +1,11 @@
+Ext.ns('TYPO3.Components.filelist.DetailView');
+
+TYPO3.Components.filelist.DetailView.Bootstrap = Ext.apply(new Ext.util.Observable, {
+	initialize: function () {
+		TYPO3.Components.filelist.ComponentRegistry.registerComponent({
+			region:'east',
+			component: TYPO3.Components.filelist.DetailView
+		});
+	}
+});
+TYPO3.Components.filelist.registerBootstrap(TYPO3.Components.filelist.DetailView.Bootstrap);
--- /dev/null
+++ typo3/sysext/filelist/res/js/DetailView/DetailView.js
@@ -0,0 +1,6 @@
+Ext.ns('TYPO3.Components.filelist.Components');
+
+TYPO3.Components.filelist.DetailView = Ext.extend(Ext.Panel, {
+	html:'Detailview Panel'
+});
+Ext.reg('TYPO3.Components.filelist.DetailView', TYPO3.Components.filelist.DetailView);
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/res/js/FileList/Bootstrap.js
@@ -0,0 +1,11 @@
+Ext.ns('TYPO3.Components.filelist.FileList');
+
+TYPO3.Components.filelist.FileList.Bootstrap = Ext.apply(new Ext.util.Observable, {
+	initialize: function () {
+		TYPO3.Components.filelist.ComponentRegistry.registerComponent({
+			region:'center',
+			component: TYPO3.Components.filelist.FileList
+		});
+	}
+});
+TYPO3.Components.filelist.registerBootstrap(TYPO3.Components.filelist.FileList.Bootstrap);
--- /dev/null
+++ typo3/sysext/filelist/res/js/FileList/FileList.js
@@ -0,0 +1,63 @@
+Ext.ns('TYPO3.Components.filelist.Components');
+TYPO3.Components.filelist.FileList = Ext.extend(Ext.grid.EditorGridPanel, {
+	border:false,
+	enableDragDrop: true,
+	loadMask:true,
+	ddGroup:'TYPO3.Components.filelist.ddList2Tree',
+	initComponent: function(){
+		var proxy = new Ext.data.DirectProxy({
+			directFn: TYPO3.FILELIST.ExtDirect.getAllInPath,
+			paramsAsHash:true
+		});
+		
+		this.contextMenu = new Ext.menu.Menu({
+			items: [{
+				text: 'Edit',
+				iconCls: 'edit'
+			}]
+		});
+		this.on('rowcontextmenu',function(node,i,e){
+			this.contextMenu.showAt(e.getXY());
+			e.stopEvent();
+		});
+		
+		this.colModel = new Ext.grid.ColumnModel({
+			defaults:{
+				width:120,
+				sortable:true
+			},
+			columns:[
+			         {id:'file_name', header: 'Filename', dataIndex:'file_name', editor: new Ext.form.TextField({allowBlank:false})},
+			         {header: 'Type', dataIndex:'file_type'},
+			         {header: 'Date', dataIndex:'file_mtime'},
+			         {header: 'Size', dataIndex:'file_size'}
+			         ]
+		});
+		this.selModel = new Ext.grid.RowSelectionModel({});
+		this.view = new Ext.grid.GridView({
+			forceFit:true
+		});
+		this.store = new Ext.data.JsonStore({
+			storeId:'TYPO3.Components.filelist.FileList.Store',
+			autoDestroy:true,
+			proxy: proxy,
+			fields:['file_name','file_type','file_mtime','file_size']
+		});
+		TYPO3.Components.filelist.FileList.superclass.initComponent.call(this);
+		Ext.getCmp('TYPO3.Components.filelist.FolderTree').on('click',this.getAllInPathOnNodeClick,this);
+		Ext.getCmp('TYPO3.Components.filelist.FolderTree').on('beforenodedrop',this.onDragDropFilesToTree,this);
+	},
+	getAllInPathOnNodeClick: function(node){
+		this.store.load({params:{
+			path:node.id
+		}})
+	},
+	onDragDropFilesToTree: function(dropEvent){
+		var s = dropEvent.data.grid.getStore();
+		Ext.each(dropEvent.selections,function(record){
+			s.remove(record);
+		});
+	}
+});
+
+Ext.reg('TYPO3.Components.filelist.FileList', TYPO3.Components.filelist.FileList);
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/res/js/FolderTree/Bootstrap.js
@@ -0,0 +1,11 @@
+Ext.ns('TYPO3.Components.filelist.FolderTree');
+
+TYPO3.Components.filelist.FolderTree.Bootstrap = Ext.apply(new Ext.util.Observable, {
+	initialize: function () {
+		TYPO3.Components.filelist.ComponentRegistry.registerComponent({
+			region:'west',
+			component: TYPO3.Components.filelist.FolderTree
+		});
+	}
+});
+TYPO3.Components.filelist.registerBootstrap(TYPO3.Components.filelist.FolderTree.Bootstrap);
--- /dev/null
+++ typo3/sysext/filelist/res/js/FolderTree/FolderTree.js
@@ -0,0 +1,39 @@
+Ext.ns('TYPO3.Components','TYPO3.Components.filelist','TYPO3.Components.filelist.FolderTree');
+
+TYPO3.Components.filelist.FolderTree = Ext.extend(Ext.Panel, {
+	initComponent: function(){
+		var fileTree = new Ext.tree.TreePanel ({
+			id: 'TYPO3.Components.filelist.FolderTree',
+			unstyled: true,
+			autoScroll: true,
+			containerScroll: true,
+			margins: '0 0 0 0',
+			cmargins: '0 0 0 0',
+			useArrows: true,
+			root: {
+				text: 'fileadmin/',
+				itemId: 'fileroot',
+				expanded: true,
+				id:'FILE_MOUNTS'
+			},
+			loader: {
+				directFn: TYPO3.FILELIST.ExtDirect.getExtFileTree,
+				paramsAsHash: true
+			},
+			enableDrop: true,
+			ddGroup:'TYPO3.Components.filelist.ddList2Tree',
+			listeners:{
+				nodedragover:{
+					fn:function(dE){
+						//disallows files dragged between nodes!
+						return dE.point === 'append';
+					}
+				}
+			}
+		});
+		TYPO3.Components.filelist.FolderTree.superclass.initComponent.call(this);
+		this.add(fileTree);
+	}
+
+});
+Ext.reg('TYPO3.Components.filelist.FolderTree', TYPO3.Components.filelist.FolderTree);
\ No newline at end of file
--- /dev/null
+++ typo3/sysext/filelist/res/js/Ui/Bootstrap.js
@@ -0,0 +1,11 @@
+Ext.ns("TYPO3.Components.filelist.Ui");
+
+TYPO3.Components.filelist.Ui.Bootstrap = Ext.apply(new Ext.util.Observable, {
+	initialize: function () {
+		TYPO3.Components.filelist.on('TYPO3.Components.filelist.afterBootstrap',function(){
+			Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+			new TYPO3.Components.filelist.Ui();
+		});
+	}
+});
+TYPO3.Components.filelist.registerBootstrap(TYPO3.Components.filelist.Ui.Bootstrap);
--- /dev/null
+++ typo3/sysext/filelist/res/js/Ui/Ui.js
@@ -0,0 +1,78 @@
+Ext.ns('TYPO3.Components.filelist');
+
+TYPO3.Components.filelist.Ui = Ext.extend(Ext.Viewport, {
+	// privat
+	initComponent: function() {
+		var defaultRegionConf = {
+			north:{
+				id:'typo3-filelist-north-region-container',
+				stateful: true
+			},
+			east:{
+				region:'east',
+				id:'typo3-filelist-east-region-container',
+				width:200,
+				split:true,
+				collapsible:true,
+				frame:true,
+				stateful: true
+			},
+			south:{
+				region:'south',
+				id:'typo3-filelist-south-region-container',
+				stateful: true
+			},
+			west:{
+				region: 'west',
+				layout: 'fit',
+				id:'typo3-filelist-west-region-container',
+				width: 300,
+				minWidth: 20,
+				floatable: true,
+				animCollapse: false,
+				split: true,
+				collapsible: true,
+				collapseMode: 'mini',
+				hideCollapseTool: true,
+				autoScroll: true,
+				border: false,
+				stateful: true
+			}
+		};
+		var items = [{
+			region:'center',
+			id:'typo3-filelist-center-region-container',
+			frame:false,
+			layout:'fit'
+		}];
+		var cR = TYPO3.Components.filelist.ComponentRegistry.items;
+		Ext.each(['north','east','south','west'],function(i){
+			if(cR[i].length > 0) items.push(defaultRegionConf[i]);
+		})
+		var config = {
+			layout:'border',
+			items: items
+		};
+		Ext.apply(this, config);
+		TYPO3.Components.filelist.Ui.superclass.initComponent.call(this);
+		this.on('afterrender', this.addComponents, this);
+	},
+
+	/**
+	 * equal segement the registert portlets to the columns
+	 *
+	 * @return {void}
+	 */
+	addComponents: function() {
+		Ext.each(['north','east','south','west','center'],function(region){
+			Ext.each(TYPO3.Components.filelist.ComponentRegistry.items[region],function(Component){
+				Ext.getCmp('typo3-filelist-'+region+'-region-container').add(new Component);
+			});
+		});
+		this.doLayout();
+	}
+
+
+});
+// register class as xclass
+Ext.reg('TYPO3.Components.filelist.Ui', TYPO3.Components.filelist.Ui);
\ No newline at end of file
