Backend Viewport

The TYPO3 backend is structured with an ExtJS viewport. This makes it easy to display various panels in different parts of the user interface and to resize those parts.

The viewport is defined in the files found in typo3/js/extjs/viewport*. It consists of a configuration file and the viewport component code itself. The viewport component is an extension of the Ext.Viewport component, meaning you can use all methods and functionalities from that component.

Viewport Structure

The viewport is structured in the following way:

+--------------------------------------------------------+
| Top Menu                                               |
+--------------------------------------------------------+
| +----------------------------------------------------+ |
| | +-------------+-------------------+--------------+ | |
| | | Module Menu | Navigation Widget | Content Area | | |
| | +-------------+-------------------+--------------+ | |
| +----------------------------------------------------+ |
| | Debug Panel                                        | |
| +----------------------------------------------------+ |
+--------------------------------------------------------+

Extending the Viewport

You can extend the TYPO3 viewport yourself if you need some special configuration options. The next example demonstrates this by adding a collapse/expand functionality to the module menu.

Warning

The example below works in that it achieves its aim, but breaks the rest of the TYPO3 backend. If someone knows how to make it work properly, your help is very welcome.

First a class must be declared to use the “render-preProcess” hook of the \TYPO3\CMS\Core\Page\PageRenderer class (in the ext_localconf.php file):

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_pagerenderer.php']['render-preProcess'][] =
  'EXT:' . $_EXTKEY . '/Classes/Utilities/Viewport.php:Tx_Examples_Utilities_Viewport->renderPreProcess';

Then here is the class itself (as usual taken from the “examples” extension):

public function renderPreProcess($parameters, $pageRenderer) {
     $pageRenderer->addExtOnReadyCode('
             Ext.apply(TYPO3.Viewport.configuration.items[1], {
                     split: true,
                     collapsible: true,
                     collapseMode: "mini",
                     hideCollapseTool: true,
                     animCollapse: false
             });',
             true
     );
}

Debug Console

The debug console is located inside the debug panel position at the south of the viewport. It’s based upon an extended ExtJS tabPanel component. A new tab can be added to the debug console by calling \TYPO3\CMS\Core\Utility\DebugUtility::debug():

\TYPO3\CMS\Core\Utility\DebugUtility::debug('New debug console message', 'Title', 'My new tab');

It seems possible to also manipulate the debug console with JavaScript, but working examples are missing for now (examples from the TYPO3 wiki don’t work (anymore?)).