Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Extension Development, native ExtJS Modules

From TYPO3Wiki
Jump to: navigation, search

notice - Reviewer needed

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

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

Refer to 28384: TYPO3 Core - Add ExtJS Xtype for BE Modules [Closed] 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.xlf: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

See also