Fixed bug #12437: Recycler produces some scroll bars + visual cleanup + js fixes
authorSteffen Kamper <info@sk-typo3.de>
Thu, 5 Nov 2009 23:57:24 +0000 (23:57 +0000)
committerSteffen Kamper <info@sk-typo3.de>
Thu, 5 Nov 2009 23:57:24 +0000 (23:57 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@6344 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/recycler/ext_tables.php
typo3/sysext/recycler/locallang_db.xml
typo3/sysext/recycler/mod1/index.php
typo3/sysext/recycler/mod1/locallang.xml
typo3/sysext/recycler/mod1/mod_template.html
typo3/sysext/recycler/res/css/customExtJs.css
typo3/sysext/recycler/res/js/t3_recycler.js

index ee38154..222e8a1 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,5 +1,6 @@
 2009-11-06  Steffen Kamper  <info@sk-typo3.de>
 
+       * Fixed bug #12437: Recycler produces some scroll bars + visual cleanup + js fixes
        * Fixed bug #12368: Context menu of page tree does not work anymore
        * Fixed bug #12468: User setup: items without csh are not aligned
 
index db2ae70..da61e9c 100644 (file)
@@ -8,6 +8,13 @@ if (TYPO3_MODE == 'BE') {
        t3lib_extMgm::addModulePath('web_txrecyclerM1',t3lib_extMgm::extPath ($_EXTKEY).'mod1/');
        t3lib_extMgm::addModule('web','txrecyclerM1','',t3lib_extMgm::extPath($_EXTKEY).'mod1/');
 
+       $GLOBALS['TYPO3_USER_SETTINGS']['columns']['recyclerGridHeight'] = array(
+               'type' => 'text',
+               'label' => 'LLL:EXT:recycler/locallang_db.xml:userSettings.RecyclerHeight',
+               'default' => 600,
+               'csh' => 'tx_recycler_grid_height',
+       );
+       t3lib_extMgm::addFieldsToUserSettings('recyclerGridHeight', 'after:resizeTextareas_Flexible');
+       t3lib_extMgm::addLLrefForTCAdescr('_MOD_user_setup','EXT:recycler/locallang_csh_mod.xml');
 }
-
 ?>
\ No newline at end of file
index 7cdd4f0..beb9b9d 100644 (file)
@@ -7,6 +7,7 @@
        <data type="array">
                <languageKey index="default" type="array">
                        <label index="moduleFunction.tx_recycler_modfunc1">Recycler</label>
+                       <label index="userSettings.RecyclerHeight">Height of Recycler Grid</label>
                </languageKey>
        </data>
 </T3locallang>
\ No newline at end of file
index 8615cff..4dbf91e 100644 (file)
@@ -88,13 +88,14 @@ class  tx_recycler_module1 extends t3lib_SCbase {
        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 @@ class  tx_recycler_module1 extends t3lib_SCbase {
                        $this->getTemplateMarkers()
                );
                $content.= $this->doc->endPage();
-               $content.= $this->doc->insertStylesAndJS($this->content);
 
                $this->content = null;
                $this->doc = null;
@@ -178,6 +178,7 @@ class  tx_recycler_module1 extends t3lib_SCbase {
         * @return      array           The JavaScript configuration
         */
        protected function getJavaScriptConfiguration() {
+               $gridHeight = isset($GLOBALS['BE_USER']->uc['recyclerGridHeight']) && intval($GLOBALS['BE_USER']->uc['recyclerGridHeight']) ? intval($GLOBALS['BE_USER']->uc['recyclerGridHeight']) : 600;
                $configuration = array(
                        'pagingSize' => $this->recordsPageLimit,
                        'showDepthMenu' => 1,
@@ -189,6 +190,7 @@ class  tx_recycler_module1 extends t3lib_SCbase {
                        'deleteDisable' => $this->allowDelete ? 0 : 1,
                        'depthSelection' => $this->getDataFromSession('depthSelection', 0),
                        'tableSelection' => $this->getDataFromSession('tableSelection', 'pages'),
+                       'gridHeight' => $gridHeight,
                );
                return $configuration;
        }
index 9597782..aa2db0d 100644 (file)
@@ -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>
                        <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 281c4c5..e36e1a0 100644 (file)
@@ -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 c48cefb..df43437 100644 (file)
@@ -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 12cfd2d..2387092 100644 (file)
@@ -133,7 +133,7 @@ Recycler.grid = {
                                startUid: Recycler.statics.startUid,
                                pagingSizeDefault: Recycler.statics.pagingSize,
                                table: Recycler.statics.tableSelection
-               }
+               };
                
                
 
@@ -159,8 +159,7 @@ Recycler.grid = {
 
                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 @@ Recycler.grid = {
                                                {
                                                        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 @@ Recycler.grid = {
                                                                        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 @@ Recycler.grid = {
                };
 
                /****************************************************
-                * 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 @@ Recycler.grid = {
                                        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
                                                                        }
-                                                               },'->',{
-
-                                                                       /****************************************************
-                                                                        * 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,
-
-                                                                       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');
-
-                                                                                               // 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
-                                                                                                       }
-                                                                                               });
-                                                                                       }
-                                                                               }
+                                                               });
+       
+                                                               Ext.getCmp('tableSelector').store.load({
+                                                                       params: {
+                                                                               depth: depth
                                                                        }
-                                                               }
-                                                       ],
-
-                                                       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
-                                                               }
+                                                               });
                                                        }
                                                }
-                                       ]
-                               }//,{
+                                       }
+                               },'-',{
+                                       xtype: 'tbtext',
+                                       text: Recycler.lang.tableMenu_label
+                               },{
 
                                        /****************************************************
-                                        * Lost and found Tab
+                                        * Table menu
                                         ****************************************************/
-                                       /*
-                                       id: 'lostAndFoundId',
-                                       title: Recycler.staticsRecycler.statics.lostFoundTab,
-                                       html:'Later'
-                               }       */
+
+                                       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 table = rec.get('valueField');
+
+                                                               // 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;
+                                                               }
+                                                               gridDs.setBaseParam('table', table);
+                                                               gridDs.load({
+                                                                       params: {
+                                                                               start: 0
+                                                                       }
+                                                               });
+                                                       }
+                                               }
+                                       }
+                               }
                        ]
+
                });
+               gridDs.load();
        }
 };
 
@@ -504,4 +460,33 @@ Recycler.utility = {
                        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