Extension Development, native ExtJS Modules

Reviewer needed

Change the {{review}} marker to {{publish}} when all parts are reviewed (e.g. TypoScript). info

See 12664: Core - Idea about faster loading modules [Closed to Kay Strobach] for current implementation details.

Refer to 28384: Core - Add ExtJS Xtype for BE Modules [Resolved to -] to use the proper Ext JS Panel as wrapper for your module.

Basic Idea

The basic idea of native Ext JS modules is to have the module stacked like a card in the backend. That way, the complete panel doesn't have to be reloaded if you switch to it. If you have stores that depend on the current page, you just need to reload the related stores.

Requirements

• TYPO3 4.7
• PHP-, TYPO3- and Ext JS-knowledge

Implementation

The idea behind this is to provide a way to create modules that are backwards compatible to previous TYPO3 versions.

Usage in extensions

You can start by creating a basic module using the extension manager. Note that there is a difference between the classic extensions and the Ext JS ones. You way want to take a look in the example extension.

ext_tables.php

The following code adds the module to the TYPO3 registry.

PHP script:

<?php
 
if(method_exists('t3lib_extMgm', 'addExtJSModule')) { 
	t3lib_extMgm::addExtJSModule(
		$_EXTKEY,
		'web',
		'module1',
		'',
		array(		//additional config
			'access' => 'user,group',
			//'icon'   => 'EXT:sitemgr/Resources/Public/Images/Backend/mod1/moduleicon.gif',
			'labels' => 'LLL:EXT:cards/Ressources/Private/Language/module1.xml:modTitle',
			'jsFiles' => array(
				'EXT:cards/Ressources/Public/JavaScripts/module1.js'
			)
		)
	);
} else {
	//code for TYPO3 prior 4.7
}

module1.js

JavaScript:

TYPO3.Viewport.ContentCards.addContentCard('web_module1',
	{
		xtype: 'modulePanel',
		tbar: [],
		html: 'i´m the report card',
		listeners: {
			uriChanged: function(id, url) {
				var dt     = new Date();
				var buffer = '<h1>Module 1</h1>You clicked the uid ' + id + '! <br>' + url + '<br> pushed at the following millisecond ' + dt.getMilliseconds();
				this.update(buffer);
			}
		}
 
	}
);

mod*/*

The classic mod*/* directory structure is not needed for this type of module anymore, if you do not want to be compatible to TYPO3 prior to 4.7 (see compatibility section).

compatibility to TYPO3 prior 4.7

To be compatible to prior TYPO3 versions you have to do the following:

• create a module the old style (in the else part)
• add compat.js file to the oldstyle module the js needs to implement a function called TYPO3.Viewport.ContentCards.addContentCard, which just stores the config in a variable
• add a viewport as wrapper to the compat.js file, which fires the js event "uriChanged" and pass the uri to the event

This way you can use the same js for TYPO3 version prior to 4.7 ;)

Conding guidelines

• To ensure that your module matches the t3skin, use modulePanel as xtype for the outer panel. This xtype was introduced in 28384: Core - Add ExtJS Xtype for BE Modules [Resolved to -].
• It's recommended to use ExtDirect over other Ajax implementations. ExtDirect is nativly supported by TYPO3 and Ext JS.

See also

• ExtDirect
• ExtDirect_StateProvider