[TYPO3-dev] Loading a tap panel's content using ExtDirect in the frontend

[Steffen Kamper]

Hi,

Am 05.08.2011 11:11, schrieb François Suter:
> Hi all,
>
> I'm writing an ExtJS application in the TYPO3 frontend. In particular, I
> have a TabPanel where the content of each tab should be loaded via AJAX.
> Thus I'm trying to use ExtDirect for this, but I can't figure out what
> to put in my JavaScript to trigger an ExtDirect call.
>
> See the sample code below. For the first tab, I just hard-coded some
> content to make a try. For the second tab, what should I put (instead of
> the question mark) to trigger a call to some ExtDirect method?
>
> Ext.onReady(function() {
>
> var tabs = new Ext.TabPanel({
> renderTo: 'tx_myext_statsdisplay',
> id: 'tx_myext_stats_tabs',
> activeTab: 0,
> overCls: 'tab-hover',
> deferredRender: false,
> items: [{
> title: 'Tab 1',
> html: 'Hello'
> }, {
> title: 'Tab 2',
> ?
> }
> ]
> });
> });
>
> Thanks in advance for the help.
>

there are several ways.

1) you know that your new content should be in tab 2, so use an itemId 
for tab2. In success of request update the html
tabs.getComponent('tab2').update(response.newHtml);

2) you want to show a new tab, send back config

return array(
   'success' => TRUE,
   'data' => array(
      'title' => 'New Tab',
      'html'  => 'new html'
   )

In success of request add new tab
tabs.add(response.data).show();

given example code is abstract but should help

vg Steffen