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

ExtDirect StateProvider

From TYPO3Wiki
Jump to: navigation, search
This page belongs to the Core Team (category Core Team)

If you want to use stateful ExtJS components in a BE module, simply include the ExtDirect StateProvider:

PHP script:
$this->doc->setExtDirectStateProvider();

Now everything is done from server side. The client application now can use the Stateprovider. The only thing done by the function above is to include t3lib/js/extjs/ExtDirect.StateProvider.js.

As there is a general object Provider in ExtJS, the StateProvider extends it. This is the usual implementation:

JavaScript:
Ext.state.Manager.setProvider(new TYPO3.state.ExtDirectProvider({
	key: 'moduleData.<mymodule>.States',
	autoRead: false
}));

The key is used in $BE_USER->uc to save the specific key. It is good practice to use moduleData.<mymodule> to seperate states in the $BE_USER->uc array.

The normal behaviour of StateProvider is a request at the start of the application to get the initial states. It's good practice to write the initial states inline into the page and read this static data instead of using a request for. That's the reason autoRead is set to false. The states are included in inline code as follows:

PHP script:
$this->pageRenderer->addInlineSettingArray('MyModule', array(
	'States' => $GLOBALS['BE_USER']->uc['moduleData']['mymodule']['States'],
));

and applied in the client app:

JavaScript:
if (Ext.isObject(TYPO3.settings.MyModule.States)) {
	Ext.state.Manager.getProvider().initState(TYPO3.settings.MyModule.States);
}

To configure ExtJS components to use states, in most cases it's a matter of adding

JavaScript:
stateful: true

It is possible to use a different stateId (else the component id is used) and add stateEvents (there are some default events already). The ExtJS API docs provide documentation on how to configure it.