Index: typo3/sysext/recycler/ext_conf_template.txt
===================================================================
--- typo3/sysext/recycler/ext_conf_template.txt	(revision 0)
+++ typo3/sysext/recycler/ext_conf_template.txt	(revision 0)
@@ -0,0 +1,2 @@
+# cat=general; type=int; label= height of recycler grid
+gridHeight = 600
Index: typo3/sysext/recycler/mod1/index.php
===================================================================
--- typo3/sysext/recycler/mod1/index.php	(revision 6314)
+++ typo3/sysext/recycler/mod1/index.php	(working copy)
@@ -88,13 +88,14 @@
 	public function render() {
 		global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;
 
+		$this->content .= $this->doc->section($GLOBALS['LANG']->getLL('title'), $GLOBALS['LANG']->getLL('description'));
 		if ($this->isAccessibleForCurrentUser) {
 			$this->loadHeaderData();
 				// div container for renderTo
-			$this->content.= '<div id="recyclerContent"></div>';
+			$this->content .= '<div id="recyclerContent"></div>';
 		} else {
 			// If no access or if ID == zero
-			$this->content.= $this->doc->spacer(10);
+			$this->content .= $this->doc->spacer(10);
 		}
 	}
 
@@ -111,7 +112,6 @@
 			$this->getTemplateMarkers()
 		);
 		$content.= $this->doc->endPage();
-		$content.= $this->doc->insertStylesAndJS($this->content);
 
 		$this->content = null;
 		$this->doc = null;
@@ -178,6 +178,8 @@
 	 * @return	array		The JavaScript configuration
 	 */
 	protected function getJavaScriptConfiguration() {
+		$extConf = unserialize($GLOBALS['TYPO3_CONF_VARS']['EXT']['extConf']['recycler']);
+		$gridHeight = isset($extConf['gridHeight']) ? $extConf['gridHeight'] : 600;
 		$configuration = array(
 			'pagingSize' => $this->recordsPageLimit,
 			'showDepthMenu' => 1,
@@ -189,6 +191,7 @@
 			'deleteDisable' => $this->allowDelete ? 0 : 1,
 			'depthSelection' => $this->getDataFromSession('depthSelection', 0),
 			'tableSelection' => $this->getDataFromSession('tableSelection', 'pages'),
+			'gridHeight' => $gridHeight,
 		);
 		return $configuration;
 	}
Index: typo3/sysext/recycler/mod1/locallang.xml
===================================================================
--- typo3/sysext/recycler/mod1/locallang.xml	(revision 6314)
+++ typo3/sysext/recycler/mod1/locallang.xml	(working copy)
@@ -7,6 +7,7 @@
 	<data type="array">
 		<languageKey index="default" type="array">
 			<label index="title">Recycler</label>
+			<label index="description">The recycler allows you to select any deleted data and undelete it. You can undelete recursive if the parent of element is deleted too.</label>
 			<label index="label_alltables">All tables</label>
 			<label index="js.label_lostandfound">Lost and found</label>
 			<label index="js.label_deletedTab">Deleted data</label>
@@ -31,12 +32,15 @@
 			<label index="js.label_title_delete">Delete?</label>
 			<label index="js.label_text_delete">Delete records from tables: </label>
 			<label index="js.label_boxLabel_undelete_recursive">Undelete recursively</label>
+			<label index="js.label_tableMenu_label">Table:</label>
 			<label index="js.label_tableMenu_emptyText">Choose a table...</label>
 			<label index="js.label_filter_emptyText">Keyword</label>
 			<label index="js.label_search">Search:</label>
 			<label index="js.label_pagingMessage">Displaying records {0} - {1} of {2}</label>
 			<label index="js.label_pagingEmpty">No records to display</label>
 			<label index="js.label_noValueFound">No records for {0}</label>
+			<label index="js.label_records">Records</label>
+			<label index="js.label_table">Table</label>
 		</languageKey>
 	</data>
 </T3locallang>
\ No newline at end of file
Index: typo3/sysext/recycler/mod1/mod_template.html
===================================================================
--- typo3/sysext/recycler/mod1/mod_template.html	(revision 6314)
+++ typo3/sysext/recycler/mod1/mod_template.html	(working copy)
@@ -14,7 +14,6 @@
 	<!-- Content of module, for instance listing, info or editing -->
 	<div id="typo3-docbody">
 		<div id="typo3-inner-docbody">
-			<h1>###TITLE###</h1>
 			###CONTENT###
 		</div>
 	</div>
Index: typo3/sysext/recycler/res/css/customExtJs.css
===================================================================
--- typo3/sysext/recycler/res/css/customExtJs.css	(revision 6314)
+++ typo3/sysext/recycler/res/css/customExtJs.css	(working copy)
@@ -1,5 +1,19 @@
+body#ext-recycler-mod1-index-php {
+	margin-left: 0;
+}
+#recyclerContent {
+	margin: 10px 0 0 4px;
+}
 body .x-panel { margin-bottom:20px; }
 
+.x-toolbar-ct .x-toolbar-left {
+	width: 400px;
+}
+
+.x-toolbar-ct .x-toolbar-right {
+	
+}
+
 .icon-grid { background-image:url('../icons/recycler2.gif') !important; }
 
 #button-grid .x-panel-body {
Index: typo3/sysext/recycler/res/js/t3_recycler.js
===================================================================
--- typo3/sysext/recycler/res/js/t3_recycler.js	(revision 6314)
+++ typo3/sysext/recycler/res/js/t3_recycler.js	(working copy)
@@ -159,8 +159,7 @@
 
 		var rowAction = function(ob, confirmQuestion, cmd, confirmTitle, confirmText) {
 				// get the 'undeleted records' grid object
-			var grid = tabs.getComponent(0).getComponent(0);
-			recArray = grid.getSelectionModel().getSelections();
+			var recArray = gridContainer.getSelectionModel().getSelections();
 
 			if (recArray.length > 0) {
 
@@ -217,7 +216,7 @@
 									callback: function(options, success, response) {
 										if (response.responseText === "1") {
 											// reload the records and the table selector
-											grid.getStore().reload();
+											gridDs.reload();
 											Ext.getCmp('tableSelector').store.reload();
 											if (arePagesAffected) {
 												Recycler.utility.updatePageTree();
@@ -255,37 +254,71 @@
 		};
 
 		/****************************************************
-		 * tab container
+		 * grid container
 		 ****************************************************/
-
-		var tabs = new Ext.TabPanel({
+		var gridContainer = new Ext.grid.GridPanel ({
+			layout: 'fit',
 			renderTo: Recycler.statics.renderTo,
-			layoutOnTabChange: true,
-			activeTab: 0,
-			width: '99%',
-			height: 600,
+			width: '98%',
+			height: parseInt(Recycler.statics.gridHeight),
 			frame: true,
-			border: false,
-			defaults: {autoScroll: true},
+			border: true,
+			defaults: {autoScroll: false},
 			plain: true,
-			buttons: [{
+			id: 'delRecordId',
+			loadMask: true,
+			store: gridDs,
+			cm: new Ext.grid.ColumnModel([
+				sm,
+				expander,
+				{header: "UID", width: 10, sortable: true, dataIndex: 'uid'},
+				{header: "PID", width: 10, sortable: true, dataIndex: 'pid'},
+				{id: 'record', header: Recycler.lang.records, width: 60, sortable: true, dataIndex: 'record', renderer: renderTopic},
+				{id: 'table', header: Recycler.lang.table, width: 20, sortable: true, dataIndex: 'tableTitle'}
+			]),
 
+			viewConfig: {
+				forceFit: true
+			},
+			
+			sm: sm,
+			plugins: [expander, new Ext.ux.plugins.FitToParent()],
+			loadMask: true,
+			stripeRows: true,
+			collapsible: false,
+			animCollapse: false,
+			
+			bbar: [
+				{
+
 					/****************************************************
+					 * Paging toolbar
+					 ****************************************************/
+					id: 'recordPaging',
+					xtype: 'paging',
+					store: gridDs,
+					pageSize: Recycler.statics.pagingSize,
+					displayInfo: true,
+					displayMsg: Recycler.lang.pagingMessage,
+					emptyMsg: Recycler.lang.pagingEmpty
+				}, '-', {
+					/****************************************************
 					 * Delete button
 					 ****************************************************/
-
+					xtype: 'button',
+					width: 80,
 					id: 'deleteButton',
 					text: Recycler.lang.deleteButton_text,
 					tooltip: Recycler.lang.deleteButton_tooltip,
 					iconCls: 'delete',
 					disabled: Recycler.statics.deleteDisable,
 					handler: function_delete
-				},{
-
+				}, {
 					/****************************************************
 					 * Undelete button
 					 ****************************************************/
-
+					xtype: 'button',
+					width: 80,
 					id: 'undeleteButton',
 					text: Recycler.lang.undeleteButton_text,
 					tooltip: Recycler.lang.undeleteButton_tooltip,
@@ -293,207 +326,134 @@
 					handler: function_undelete
 				}
 			],
-			buttonAlign:'left',
-			items:[
-				{
 
+			tbar: [
+				Recycler.lang.search, ' ',
+					new Ext.app.SearchField({
+					store: gridDs,
+					width: 200
+				}),
+				'-', {
+					xtype: 'tbtext',
+					text: Recycler.lang.depth + ':'
+				},{
+
 					/****************************************************
-					 * Deleted records Tab
+					 * Depth menu
 					 ****************************************************/
-
-					id: 'delRecordId',
-					title: Recycler.lang.deletedTab,
-					items: [
-						{
-
-							/****************************************************
-							 * Grid
-							 ****************************************************/
-
-							xtype: 'grid',
-							loadMask: true,
-							store: gridDs,
-							cm: new Ext.grid.ColumnModel([
-								sm,
-								expander,
-								{header: "UID", width: 10, sortable: true, dataIndex: 'uid'},
-								{header: "PID", width: 10, sortable: true, dataIndex: 'pid'},
-								{id:'record',header: "Records", width: 60, sortable: true, dataIndex: 'record', renderer: renderTopic},
-								{header: "Table", width: 20, sortable: true, dataIndex: 'tableTitle'}
-							]),
-
-							view: new Ext.grid.GridView({
-								forceFit:true
-							}),
-
-							bbar: [
-								{
-
-									/****************************************************
-									 * Paging toolbar
-									 ****************************************************/
-									id: 'recordPaging',
-									xtype: 'paging',
-									store: gridDs,
-									pageSize: Recycler.statics.pagingSize,
-									displayInfo: true,
-									displayMsg: Recycler.lang.pagingMessage,
-									emptyMsg: Recycler.lang.pagingEmpty
-								}
-							],
-
-							tbar: [
-									Recycler.lang.search, ' ',
-										new Ext.app.SearchField({
-										store: gridDs,
-										width: 200
-									}),
-									'->', {
-
-									/****************************************************
-									 * Depth menu
-									 ****************************************************/
-
-									xtype: 'combo',
-									lazyRender: true,
-									valueField: 'depth',
-									displayField: 'label',
-									id: 'depthSelector',
-									mode: 'local',
-									emptyText: Recycler.lang.depth,
-									selectOnFocus: true,
-									readOnly: true,
-									triggerAction: 'all',
-									editable: false,
-									forceSelection: true,
-									hidden: Recycler.lang.showDepthMenu,
-									store: new Ext.data.SimpleStore({
-										autoLoad: true,
-										fields: ['depth','label'],
-										data : [
-											['0', Recycler.lang.depth_0],
-											['1', Recycler.lang.depth_1],
-											['2', Recycler.lang.depth_2],
-											['3', Recycler.lang.depth_3],
-											['4', Recycler.lang.depth_4],
-											['999', Recycler.lang.depth_infi]
-										]
-									}),
-									value: Recycler.statics.depthSelection,
-									listeners: {
-										'select': {
-											fn: function(cmp, rec, index) {
-												var store = tabs.getComponent(0).getComponent(0).getStore();
-												var depth = rec.get('depth');
-												gridDs.setBaseParam('depth', depth);
-												store.load({
-													params: {
-														start: 0
-													}
-												});
-
-												Ext.getCmp('tableSelector').store.load({
-													params: {
-														depth: depth
-													}
-												});
-											}
-										}
+	
+					xtype: 'combo',
+					width: 150,
+					lazyRender: true,
+					valueField: 'depth',
+					displayField: 'label',
+					id: 'depthSelector',
+					mode: 'local',
+					emptyText: Recycler.lang.depth,
+					selectOnFocus: true,
+					readOnly: true,
+					triggerAction: 'all',
+					editable: false,
+					forceSelection: true,
+					hidden: Recycler.lang.showDepthMenu,
+					store: new Ext.data.SimpleStore({
+						autoLoad: true,
+						fields: ['depth','label'],
+						data : [
+							['0', Recycler.lang.depth_0],
+							['1', Recycler.lang.depth_1],
+							['2', Recycler.lang.depth_2],
+							['3', Recycler.lang.depth_3],
+							['4', Recycler.lang.depth_4],
+							['999', Recycler.lang.depth_infi]
+						]
+					}),
+					value: Recycler.statics.depthSelection,
+					listeners: {
+						'select': {
+							fn: function(cmp, rec, index) {
+								var depth = rec.get('depth');
+								gridDs.setBaseParam('depth', depth);
+								gridDs.load({
+									params: {
+										start: 0
 									}
-								},'->',{
+								});
+	
+								Ext.getCmp('tableSelector').store.load({
+									params: {
+										depth: depth
+									}
+								});
+							}
+						}
+					}
+				},'-',{
+					xtype: 'tbtext',
+					text: Recycler.lang.tableMenu_label
+				},{
 
-									/****************************************************
-									 * Table menu
-									 ****************************************************/
+					/****************************************************
+					 * Table menu
+					 ****************************************************/
 
-									xtype: 'combo',
-									lazyRender: true,
-									valueField: 'valueField',
-									displayField: 'tableTitle',
-									id: 'tableSelector',
-									mode: 'local',
-									emptyText: Recycler.lang.tableMenu_emptyText,
-									selectOnFocus: true,
-									readOnly: true,
-									triggerAction: 'all',
-									editable: false,
-									forceSelection: true,
+					xtype: 'combo',
+					lazyRender: true,
+					valueField: 'valueField',
+					displayField: 'tableTitle',
+					id: 'tableSelector',
+					mode: 'local',
+					emptyText: Recycler.lang.tableMenu_emptyText,
+					selectOnFocus: true,
+					readOnly: true,
+					triggerAction: 'all',
+					editable: false,
+					forceSelection: true,
 
-									store: new Ext.data.Store({
-										autoLoad: true,
-										url: Recycler.statics.ajaxController + '&startUid=' + Recycler.statics.startUid + '&cmd=getTables' + '&depth=' + Recycler.statics.depthSelection,
-										reader: new Ext.data.ArrayReader({}, [
-											{name: 'table', type: 'string'},
-											{name: 'records', type: 'int'},
-											{name: 'valueField', type: 'string'},
-											{name: 'tableTitle', type: 'string'}
-										]),
-										listeners: {
-											'load': {
-												fn: function(store, records) {
-													Ext.getCmp('tableSelector').setValue(Recycler.statics.tableSelection);
-												},
-												single: true
-											}
-										}
-									}),
-									valueNotFoundText: String.format(Recycler.lang.noValueFound, Recycler.statics.tableSelection),
-									tpl: '<tpl for="."><tpl if="records &gt; 0"><div ext:qtip="{table} ({records})" class="x-combo-list-item">{tableTitle} ({records}) </div></tpl><tpl if="records &lt; 1"><div ext:qtip="{table} ({records})" class="x-combo-list-item x-item-disabled">{tableTitle} ({records}) </div></tpl></tpl>',
-									listeners: {
-										'select': {
-											fn: function(cmp, rec, index) {
-												var store = gridDs;
-												var table = rec.get('valueField');
+					store: new Ext.data.Store({
+						autoLoad: true,
+						url: Recycler.statics.ajaxController + '&startUid=' + Recycler.statics.startUid + '&cmd=getTables' + '&depth=' + Recycler.statics.depthSelection,
+						reader: new Ext.data.ArrayReader({}, [
+							{name: 'table', type: 'string'},
+							{name: 'records', type: 'int'},
+							{name: 'valueField', type: 'string'},
+							{name: 'tableTitle', type: 'string'}
+						]),
+						listeners: {
+							'load': {
+								fn: function(store, records) {
+									Ext.getCmp('tableSelector').setValue(Recycler.statics.tableSelection);
+								},
+								single: true
+							}
+						}
+					}),
+					valueNotFoundText: String.format(Recycler.lang.noValueFound, Recycler.statics.tableSelection),
+					tpl: '<tpl for="."><tpl if="records &gt; 0"><div ext:qtip="{table} ({records})" class="x-combo-list-item">{tableTitle} ({records}) </div></tpl><tpl if="records &lt; 1"><div ext:qtip="{table} ({records})" class="x-combo-list-item x-item-disabled">{tableTitle} ({records}) </div></tpl></tpl>',
+					listeners: {
+						'select': {
+							fn: function(cmp, rec, index) {
+								var table = rec.get('valueField');
 
-												// do not reload if the table selected has no deleted records - hide all records
-												if (rec.get('records') <= 0) {
-													store.filter('uid', '-1'); // never true
-													return false;
-												}
-												gridDs.setBaseParam('table', table);
-												store.load({
-													params: {
-														start: 0
-													}
-												});
-											}
-										}
-									}
+								// do not reload if the table selected has no deleted records - hide all records
+								if (rec.get('records') <= 0) {
+									gridDs.filter('uid', '-1'); // never true
+									return false;
 								}
-							],
-
-							sm: sm,
-							plugins: expander,
-							loadMask: true,
-							stripeRows: true,
-							width: '100%',
-							height: 530,
-							collapsible: false,
-							animCollapse: false,
-							frame: false,
-							border: false,
-							listeners: {
-								'render': {
-									fn: function(cmp) {
-										cmp.getStore().load();
-									},
-									single: true
-								}
+								gridDs.setBaseParam('table', table);
+								gridDs.load({
+									params: {
+										start: 0
+									}
+								});
 							}
 						}
-					]
-				}//,{
-
-					/****************************************************
-					 * Lost and found Tab
-					 ****************************************************/
-					/*
-					id: 'lostAndFoundId',
-					title: Recycler.staticsRecycler.statics.lostFoundTab,
-					html:'Later'
-				}	*/
+					}
+				}
 			]
+
 		});
+		gridDs.load();
 	}
 };
 
@@ -504,4 +464,33 @@
 			top.content.nav_frame.Tree.refresh();
 		}
 	}
-};
\ No newline at end of file
+};
+
+/* plugin for resize of grid in single container */
+Ext.namespace('Ext.ux.plugins');
+Ext.ux.plugins.FitToParent = Ext.extend(Object, {
+	constructor : function(parent) {
+		this.parent = parent;
+	},
+	init : function(c) {
+		c.on('render', function(c) {
+			c.fitToElement = Ext.get(this.parent
+					|| c.getDomPositionEl().dom.parentNode);
+			if (!c.doLayout) {
+				this.fitSizeToParent();
+				Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
+			}
+		}, this, {
+			single : true
+		});
+		if (c.doLayout) {
+			c.monitorResize = true;
+			c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
+		}
+	},
+	fitSizeToParent : function() {
+		var pos = this.getPosition(true), size = this.fitToElement
+				.getViewSize();
+		this.setSize(size.width - pos[0], size.height - pos[1]);
+	}
+});
\ No newline at end of file
Index: typo3/sysext/recycler/ext_conf_template.txt
===================================================================
--- typo3/sysext/recycler/ext_conf_template.txt	(revision 0)
+++ typo3/sysext/recycler/ext_conf_template.txt	(revision 0)
@@ -0,0 +1,2 @@
+# cat=general; type=int; label= height of recycler grid
+gridHeight = 600
Index: typo3/sysext/recycler/mod1/index.php
===================================================================
--- typo3/sysext/recycler/mod1/index.php	(revision 6314)
+++ typo3/sysext/recycler/mod1/index.php	(working copy)
@@ -88,13 +88,14 @@
 	public function render() {
 		global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;
 
+		$this->content .= $this->doc->section($GLOBALS['LANG']->getLL('title'), $GLOBALS['LANG']->getLL('description'));
 		if ($this->isAccessibleForCurrentUser) {
 			$this->loadHeaderData();
 				// div container for renderTo
-			$this->content.= '<div id="recyclerContent"></div>';
+			$this->content .= '<div id="recyclerContent"></div>';
 		} else {
 			// If no access or if ID == zero
-			$this->content.= $this->doc->spacer(10);
+			$this->content .= $this->doc->spacer(10);
 		}
 	}
 
@@ -111,7 +112,6 @@
 			$this->getTemplateMarkers()
 		);
 		$content.= $this->doc->endPage();
-		$content.= $this->doc->insertStylesAndJS($this->content);
 
 		$this->content = null;
 		$this->doc = null;
@@ -178,6 +178,8 @@
 	 * @return	array		The JavaScript configuration
 	 */
 	protected function getJavaScriptConfiguration() {
+		$extConf = unserialize($GLOBALS['TYPO3_CONF_VARS']['EXT']['extConf']['recycler']);
+		$gridHeight = isset($extConf['gridHeight']) ? $extConf['gridHeight'] : 600;
 		$configuration = array(
 			'pagingSize' => $this->recordsPageLimit,
 			'showDepthMenu' => 1,
@@ -189,6 +191,7 @@
 			'deleteDisable' => $this->allowDelete ? 0 : 1,
 			'depthSelection' => $this->getDataFromSession('depthSelection', 0),
 			'tableSelection' => $this->getDataFromSession('tableSelection', 'pages'),
+			'gridHeight' => $gridHeight,
 		);
 		return $configuration;
 	}
Index: typo3/sysext/recycler/mod1/locallang.xml
===================================================================
--- typo3/sysext/recycler/mod1/locallang.xml	(revision 6314)
+++ typo3/sysext/recycler/mod1/locallang.xml	(working copy)
@@ -7,6 +7,7 @@
 	<data type="array">
 		<languageKey index="default" type="array">
 			<label index="title">Recycler</label>
+			<label index="description">The recycler allows you to select any deleted data and undelete it. You can undelete recursive if the parent of element is deleted too.</label>
 			<label index="label_alltables">All tables</label>
 			<label index="js.label_lostandfound">Lost and found</label>
 			<label index="js.label_deletedTab">Deleted data</label>
@@ -31,12 +32,15 @@
 			<label index="js.label_title_delete">Delete?</label>
 			<label index="js.label_text_delete">Delete records from tables: </label>
 			<label index="js.label_boxLabel_undelete_recursive">Undelete recursively</label>
+			<label index="js.label_tableMenu_label">Table:</label>
 			<label index="js.label_tableMenu_emptyText">Choose a table...</label>
 			<label index="js.label_filter_emptyText">Keyword</label>
 			<label index="js.label_search">Search:</label>
 			<label index="js.label_pagingMessage">Displaying records {0} - {1} of {2}</label>
 			<label index="js.label_pagingEmpty">No records to display</label>
 			<label index="js.label_noValueFound">No records for {0}</label>
+			<label index="js.label_records">Records</label>
+			<label index="js.label_table">Table</label>
 		</languageKey>
 	</data>
 </T3locallang>
\ No newline at end of file
Index: typo3/sysext/recycler/mod1/mod_template.html
===================================================================
--- typo3/sysext/recycler/mod1/mod_template.html	(revision 6314)
+++ typo3/sysext/recycler/mod1/mod_template.html	(working copy)
@@ -14,7 +14,6 @@
 	<!-- Content of module, for instance listing, info or editing -->
 	<div id="typo3-docbody">
 		<div id="typo3-inner-docbody">
-			<h1>###TITLE###</h1>
 			###CONTENT###
 		</div>
 	</div>
Index: typo3/sysext/recycler/res/css/customExtJs.css
===================================================================
--- typo3/sysext/recycler/res/css/customExtJs.css	(revision 6314)
+++ typo3/sysext/recycler/res/css/customExtJs.css	(working copy)
@@ -1,5 +1,19 @@
+body#ext-recycler-mod1-index-php {
+	margin-left: 0;
+}
+#recyclerContent {
+	margin: 10px 0 0 4px;
+}
 body .x-panel { margin-bottom:20px; }
 
+.x-toolbar-ct .x-toolbar-left {
+	width: 400px;
+}
+
+.x-toolbar-ct .x-toolbar-right {
+	
+}
+
 .icon-grid { background-image:url('../icons/recycler2.gif') !important; }
 
 #button-grid .x-panel-body {
Index: typo3/sysext/recycler/res/js/t3_recycler.js
===================================================================
--- typo3/sysext/recycler/res/js/t3_recycler.js	(revision 6314)
+++ typo3/sysext/recycler/res/js/t3_recycler.js	(working copy)
@@ -133,7 +133,7 @@
 				startUid: Recycler.statics.startUid,
 				pagingSizeDefault: Recycler.statics.pagingSize,
 				table: Recycler.statics.tableSelection
-		}
+		};
 		
 		
 
@@ -159,8 +159,7 @@
 
 		var rowAction = function(ob, confirmQuestion, cmd, confirmTitle, confirmText) {
 				// get the 'undeleted records' grid object
-			var grid = tabs.getComponent(0).getComponent(0);
-			recArray = grid.getSelectionModel().getSelections();
+			var recArray = gridContainer.getSelectionModel().getSelections();
 
 			if (recArray.length > 0) {
 
@@ -206,7 +205,7 @@
 						{
 							text: Recycler.lang.yes,
 							handler: function(cmp, e) {
-								tcemainData = new Array();
+								var tcemainData = [];
 
 								for (iterator=0; iterator < recArray.length; iterator++) {
 									tcemainData[iterator] = [recArray[iterator].data.table, recArray[iterator].data.uid];
@@ -217,7 +216,7 @@
 									callback: function(options, success, response) {
 										if (response.responseText === "1") {
 											// reload the records and the table selector
-											grid.getStore().reload();
+											gridDs.reload();
 											Ext.getCmp('tableSelector').store.reload();
 											if (arePagesAffected) {
 												Recycler.utility.updatePageTree();
@@ -255,37 +254,67 @@
 		};
 
 		/****************************************************
-		 * tab container
+		 * grid container
 		 ****************************************************/
-
-		var tabs = new Ext.TabPanel({
+		var gridContainer = new Ext.grid.GridPanel ({
+			layout: 'fit',
 			renderTo: Recycler.statics.renderTo,
-			layoutOnTabChange: true,
-			activeTab: 0,
-			width: '99%',
-			height: 600,
+			width: '98%',
+			height: parseInt(Recycler.statics.gridHeight),
 			frame: true,
-			border: false,
-			defaults: {autoScroll: true},
+			border: true,
+			defaults: {autoScroll: false},
 			plain: true,
-			buttons: [{
+			id: 'delRecordId',
+			loadMask: true,
+			stripeRows: true,
+			collapsible: false,
+			animCollapse: false,
+			store: gridDs,
+			cm: new Ext.grid.ColumnModel([
+				sm,
+				expander,
+				{header: "UID", width: 10, sortable: true, dataIndex: 'uid'},
+				{header: "PID", width: 10, sortable: true, dataIndex: 'pid'},
+				{id: 'record', header: Recycler.lang.records, width: 60, sortable: true, dataIndex: 'record', renderer: renderTopic},
+				{id: 'table', header: Recycler.lang.table, width: 20, sortable: true, dataIndex: 'tableTitle'}
+			]),
+			viewConfig: {
+				forceFit: true
+			},
+			sm: sm,
+			plugins: [expander, new Ext.ux.plugins.FitToParent()],
+			bbar: [
+				{
 
 					/****************************************************
+					 * Paging toolbar
+					 ****************************************************/
+					id: 'recordPaging',
+					xtype: 'paging',
+					store: gridDs,
+					pageSize: Recycler.statics.pagingSize,
+					displayInfo: true,
+					displayMsg: Recycler.lang.pagingMessage,
+					emptyMsg: Recycler.lang.pagingEmpty
+				}, '-', {
+					/****************************************************
 					 * Delete button
 					 ****************************************************/
-
+					xtype: 'button',
+					width: 80,
 					id: 'deleteButton',
 					text: Recycler.lang.deleteButton_text,
 					tooltip: Recycler.lang.deleteButton_tooltip,
 					iconCls: 'delete',
 					disabled: Recycler.statics.deleteDisable,
 					handler: function_delete
-				},{
-
+				}, {
 					/****************************************************
 					 * Undelete button
 					 ****************************************************/
-
+					xtype: 'button',
+					width: 80,
 					id: 'undeleteButton',
 					text: Recycler.lang.undeleteButton_text,
 					tooltip: Recycler.lang.undeleteButton_tooltip,
@@ -293,207 +322,134 @@
 					handler: function_undelete
 				}
 			],
-			buttonAlign:'left',
-			items:[
-				{
 
+			tbar: [
+				Recycler.lang.search, ' ',
+					new Ext.app.SearchField({
+					store: gridDs,
+					width: 200
+				}),
+				'-', {
+					xtype: 'tbtext',
+					text: Recycler.lang.depth + ':'
+				},{
+
 					/****************************************************
-					 * Deleted records Tab
+					 * Depth menu
 					 ****************************************************/
-
-					id: 'delRecordId',
-					title: Recycler.lang.deletedTab,
-					items: [
-						{
-
-							/****************************************************
-							 * Grid
-							 ****************************************************/
-
-							xtype: 'grid',
-							loadMask: true,
-							store: gridDs,
-							cm: new Ext.grid.ColumnModel([
-								sm,
-								expander,
-								{header: "UID", width: 10, sortable: true, dataIndex: 'uid'},
-								{header: "PID", width: 10, sortable: true, dataIndex: 'pid'},
-								{id:'record',header: "Records", width: 60, sortable: true, dataIndex: 'record', renderer: renderTopic},
-								{header: "Table", width: 20, sortable: true, dataIndex: 'tableTitle'}
-							]),
-
-							view: new Ext.grid.GridView({
-								forceFit:true
-							}),
-
-							bbar: [
-								{
-
-									/****************************************************
-									 * Paging toolbar
-									 ****************************************************/
-									id: 'recordPaging',
-									xtype: 'paging',
-									store: gridDs,
-									pageSize: Recycler.statics.pagingSize,
-									displayInfo: true,
-									displayMsg: Recycler.lang.pagingMessage,
-									emptyMsg: Recycler.lang.pagingEmpty
-								}
-							],
-
-							tbar: [
-									Recycler.lang.search, ' ',
-										new Ext.app.SearchField({
-										store: gridDs,
-										width: 200
-									}),
-									'->', {
-
-									/****************************************************
-									 * Depth menu
-									 ****************************************************/
-
-									xtype: 'combo',
-									lazyRender: true,
-									valueField: 'depth',
-									displayField: 'label',
-									id: 'depthSelector',
-									mode: 'local',
-									emptyText: Recycler.lang.depth,
-									selectOnFocus: true,
-									readOnly: true,
-									triggerAction: 'all',
-									editable: false,
-									forceSelection: true,
-									hidden: Recycler.lang.showDepthMenu,
-									store: new Ext.data.SimpleStore({
-										autoLoad: true,
-										fields: ['depth','label'],
-										data : [
-											['0', Recycler.lang.depth_0],
-											['1', Recycler.lang.depth_1],
-											['2', Recycler.lang.depth_2],
-											['3', Recycler.lang.depth_3],
-											['4', Recycler.lang.depth_4],
-											['999', Recycler.lang.depth_infi]
-										]
-									}),
-									value: Recycler.statics.depthSelection,
-									listeners: {
-										'select': {
-											fn: function(cmp, rec, index) {
-												var store = tabs.getComponent(0).getComponent(0).getStore();
-												var depth = rec.get('depth');
-												gridDs.setBaseParam('depth', depth);
-												store.load({
-													params: {
-														start: 0
-													}
-												});
-
-												Ext.getCmp('tableSelector').store.load({
-													params: {
-														depth: depth
-													}
-												});
-											}
-										}
+	
+					xtype: 'combo',
+					width: 150,
+					lazyRender: true,
+					valueField: 'depth',
+					displayField: 'label',
+					id: 'depthSelector',
+					mode: 'local',
+					emptyText: Recycler.lang.depth,
+					selectOnFocus: true,
+					readOnly: true,
+					triggerAction: 'all',
+					editable: false,
+					forceSelection: true,
+					hidden: Recycler.lang.showDepthMenu,
+					store: new Ext.data.SimpleStore({
+						autoLoad: true,
+						fields: ['depth','label'],
+						data : [
+							['0', Recycler.lang.depth_0],
+							['1', Recycler.lang.depth_1],
+							['2', Recycler.lang.depth_2],
+							['3', Recycler.lang.depth_3],
+							['4', Recycler.lang.depth_4],
+							['999', Recycler.lang.depth_infi]
+						]
+					}),
+					value: Recycler.statics.depthSelection,
+					listeners: {
+						'select': {
+							fn: function(cmp, rec, index) {
+								var depth = rec.get('depth');
+								gridDs.setBaseParam('depth', depth);
+								gridDs.load({
+									params: {
+										start: 0
 									}
-								},'->',{
+								});
+	
+								Ext.getCmp('tableSelector').store.load({
+									params: {
+										depth: depth
+									}
+								});
+							}
+						}
+					}
+				},'-',{
+					xtype: 'tbtext',
+					text: Recycler.lang.tableMenu_label
+				},{
 
-									/****************************************************
-									 * Table menu
-									 ****************************************************/
+					/****************************************************
+					 * Table menu
+					 ****************************************************/
 
-									xtype: 'combo',
-									lazyRender: true,
-									valueField: 'valueField',
-									displayField: 'tableTitle',
-									id: 'tableSelector',
-									mode: 'local',
-									emptyText: Recycler.lang.tableMenu_emptyText,
-									selectOnFocus: true,
-									readOnly: true,
-									triggerAction: 'all',
-									editable: false,
-									forceSelection: true,
+					xtype: 'combo',
+					lazyRender: true,
+					valueField: 'valueField',
+					displayField: 'tableTitle',
+					id: 'tableSelector',
+					mode: 'local',
+					emptyText: Recycler.lang.tableMenu_emptyText,
+					selectOnFocus: true,
+					readOnly: true,
+					triggerAction: 'all',
+					editable: false,
+					forceSelection: true,
 
-									store: new Ext.data.Store({
-										autoLoad: true,
-										url: Recycler.statics.ajaxController + '&startUid=' + Recycler.statics.startUid + '&cmd=getTables' + '&depth=' + Recycler.statics.depthSelection,
-										reader: new Ext.data.ArrayReader({}, [
-											{name: 'table', type: 'string'},
-											{name: 'records', type: 'int'},
-											{name: 'valueField', type: 'string'},
-											{name: 'tableTitle', type: 'string'}
-										]),
-										listeners: {
-											'load': {
-												fn: function(store, records) {
-													Ext.getCmp('tableSelector').setValue(Recycler.statics.tableSelection);
-												},
-												single: true
-											}
-										}
-									}),
-									valueNotFoundText: String.format(Recycler.lang.noValueFound, Recycler.statics.tableSelection),
-									tpl: '<tpl for="."><tpl if="records &gt; 0"><div ext:qtip="{table} ({records})" class="x-combo-list-item">{tableTitle} ({records}) </div></tpl><tpl if="records &lt; 1"><div ext:qtip="{table} ({records})" class="x-combo-list-item x-item-disabled">{tableTitle} ({records}) </div></tpl></tpl>',
-									listeners: {
-										'select': {
-											fn: function(cmp, rec, index) {
-												var store = gridDs;
-												var table = rec.get('valueField');
+					store: new Ext.data.Store({
+						autoLoad: true,
+						url: Recycler.statics.ajaxController + '&startUid=' + Recycler.statics.startUid + '&cmd=getTables' + '&depth=' + Recycler.statics.depthSelection,
+						reader: new Ext.data.ArrayReader({}, [
+							{name: 'table', type: 'string'},
+							{name: 'records', type: 'int'},
+							{name: 'valueField', type: 'string'},
+							{name: 'tableTitle', type: 'string'}
+						]),
+						listeners: {
+							'load': {
+								fn: function(store, records) {
+									Ext.getCmp('tableSelector').setValue(Recycler.statics.tableSelection);
+								},
+								single: true
+							}
+						}
+					}),
+					valueNotFoundText: String.format(Recycler.lang.noValueFound, Recycler.statics.tableSelection),
+					tpl: '<tpl for="."><tpl if="records &gt; 0"><div ext:qtip="{table} ({records})" class="x-combo-list-item">{tableTitle} ({records}) </div></tpl><tpl if="records &lt; 1"><div ext:qtip="{table} ({records})" class="x-combo-list-item x-item-disabled">{tableTitle} ({records}) </div></tpl></tpl>',
+					listeners: {
+						'select': {
+							fn: function(cmp, rec, index) {
+								var table = rec.get('valueField');
 
-												// do not reload if the table selected has no deleted records - hide all records
-												if (rec.get('records') <= 0) {
-													store.filter('uid', '-1'); // never true
-													return false;
-												}
-												gridDs.setBaseParam('table', table);
-												store.load({
-													params: {
-														start: 0
-													}
-												});
-											}
-										}
-									}
+								// do not reload if the table selected has no deleted records - hide all records
+								if (rec.get('records') <= 0) {
+									gridDs.filter('uid', '-1'); // never true
+									return false;
 								}
-							],
-
-							sm: sm,
-							plugins: expander,
-							loadMask: true,
-							stripeRows: true,
-							width: '100%',
-							height: 530,
-							collapsible: false,
-							animCollapse: false,
-							frame: false,
-							border: false,
-							listeners: {
-								'render': {
-									fn: function(cmp) {
-										cmp.getStore().load();
-									},
-									single: true
-								}
+								gridDs.setBaseParam('table', table);
+								gridDs.load({
+									params: {
+										start: 0
+									}
+								});
 							}
 						}
-					]
-				}//,{
-
-					/****************************************************
-					 * Lost and found Tab
-					 ****************************************************/
-					/*
-					id: 'lostAndFoundId',
-					title: Recycler.staticsRecycler.statics.lostFoundTab,
-					html:'Later'
-				}	*/
+					}
+				}
 			]
+
 		});
+		gridDs.load();
 	}
 };
 
@@ -504,4 +460,33 @@
 			top.content.nav_frame.Tree.refresh();
 		}
 	}
-};
\ No newline at end of file
+};
+
+/* plugin for resize of grid in single container */
+Ext.namespace('Ext.ux.plugins');
+Ext.ux.plugins.FitToParent = Ext.extend(Object, {
+	constructor : function(parent) {
+		this.parent = parent;
+	},
+	init : function(c) {
+		c.on('render', function(c) {
+			c.fitToElement = Ext.get(this.parent
+					|| c.getDomPositionEl().dom.parentNode);
+			if (!c.doLayout) {
+				this.fitSizeToParent();
+				Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
+			}
+		}, this, {
+			single : true
+		});
+		if (c.doLayout) {
+			c.monitorResize = true;
+			c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
+		}
+	},
+	fitSizeToParent : function() {
+		var pos = this.getPosition(true), size = this.fitToElement
+				.getViewSize();
+		this.setSize(size.width - pos[0], size.height - pos[1]);
+	}
+});
\ No newline at end of file