[TYPO3-mvc] ExtJS

[Christophe balisky]

Steffen Kamper a écrit :
> Hi Xavier,
>
> Xavier Perseguers schrieb:
>   
>> Hi Steffen,
>>
>>     
>>>> Is there already some kind of example how to integrate ExtJS in FE? A 
>>>> best practice would be perfect but just an example on how it is 
>>>> supposed to be done would already be cool.
>>>>
>>>>         
>>> great you started the project!
>>>
>>> Now let's think about what do do. As you are more familar with 
>>> extbase, can you make the correct folder structure? I will come with some 
>>>       
>> Regarding Extbase and Fluid, there should not be a great problem, I'm 
>> already quite familiar even if I still have some questions :-)
>>
>>     
>
> i need some practise, i didn't used it since yet, though i know the 
> source and followed this list complete.
>
>   
>> Regarding ExtJS I'm quite new to it. This is the purpose too of this 
>> project for me and for others to show best practices. I put a few 
>> comments on the project webpage (forge) on overview and as a "getting 
>> started" news.
>>     
>
> i'm quite familar to extJS, even if i have some questions left :)
> What we need most: ajax controller
> It doesn't matter if eID or type, but some method to communicate.
> The most typical is to retrievedata in json format to fill a extJS 
> store, doesn't matter if needed for combo, grid or something else.
>
>   
>> My main plans are:
>>
>> Frontend:
>>
>> - AJAX call to populate some drop-down
>>     
> see above: controller
>   
>> - Using ExtJS form rendering with Extbase
>>
>>     
> ok, let say: use little widgets in FE
>
>   
>> Backend:
>>
>> - Module as a pure ExtJS application
>>
>>     
>
> ok, use a more complex layout there.
> But lets start with FE, as extbase/fluid are more involved here.
>
> And for the others: it's not a private project of Xavier and me, all are 
> invited to help/participate/ask etc. This is a learning / 
> proof-of-concept, where you all can benefit from (hopefully)
>
>
> vg Steffen
> _______________________________________________
> TYPO3-project-typo3v4mvc mailing list
> TYPO3-project-typo3v4mvc at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-project-typo3v4mvc
>
>
>   
Hello Xavier, and Steffen, I've been playing around with extbase ajax 
and JQuery.

I wrote  an ajax dispatcher allowing me to call extbase controller 
actions through ajax calls.

Il also needed to create viewhelpers to replace form submit calls and 
action links with ajax calls and
ajax action panels to receive ajax content.

here are my two extensions to do so :

cby_ajax_mvc : has the ajax dispatcher you have it uses eId to call the 
dispatcher class. It returns a JSON containing :

    * content : the xhtml content returned by the controllers action.
    * scripts : array of javascript call backs to execute after ajax
      request has been done. (for example update a google map and
      refresh list of points of interest) . The controller injects the
      callabcks by putting them in  
      $GLOBALS['CBYAJAXCALLBACK']['scripts'] array.   
      ex:
             if (count($pois) && $GLOBALS['CBYAJAXMODE']) {
                 
      $GLOBALS['CBYAJAXCALLBACK']['scripts'][]='ard_drawmap("carsharingmap",['.implode(',',$pois).'],1);';   

              }

this mecanic should probably be enhanced to face most programming needs.
the JSON is processed by the viewhelper initiating the ajax call.

ard_view_helpers : various viewhelpers I made mostly using jquery
both plugins need the meta_feedit plugins jquery library.
Most of the magic is done in the ardviewhelpers.js functions :


function ardActionLink(actionUrl,actionPanel) {
  ardLoadHourGlass();
jQuery.ajax({
type: "GET",
 url: actionUrl,
 data: "",
 success: function(msg){
    eval("response="+msg);
      response.actionPanel=actionPanel;
    ardHandleResponse(response);
      ardUnloadHourGlass();
    }
      });
return false;
}

function ardHandleResponse(responseString) {
 jQuery("#"+response.actionPanel).replaceWith(response.content);
  if (response.scripts!=null) {
    for (var i=0; i<response.scripts.length; i++) {
    eval(response.scripts[i]);
   }
  }
}


I'm starting a new project now which is going to use extJS so your posts 
interested me.

To use the viewhelpers  here's a small example :

{namespace ard=Tx_ArdViewHelpers_ViewHelpers}
<ard:actionPanel id="ardcallcenter" class="ard">
    <ard:tabs.container id="cctabnav" defaultTab="tb_calls">
        <li class="active">Appels en cours(<b>{nb_tasks}</b>) </li>
        <li><ard:link.action actionPanel="ardcallcenter" 
extensionName="ArdCricCallCenter" pluginName="Pi1" controller="Order"   
action="index" >Commandes en cours 
(<b>{nb_orders}</b>)</ard:link.action></li>
        <li><ard:link.action actionPanel="ardcallcenter"  
extensionName="ArdCricCallCenter" pluginName="Pi1" 
actionPanel="ardcallcenter" action="index" >TADs en cours 
(<b>{nb_tads}</b>)</ard:link.action> </li>
        <li><ard:link.action actionPanel="ardcallcenter" 
extensionName="ArdCricCallCenter" pluginName="Pi1" 
controller="Complaint" action="index" >Réclamations non traitées 
(<b>{nb_complaints}</b>)</ard:link.action> </li>
    </ard:tabs.container>
    <div class="ard_cnt">
        <ard:link.action actionPanel="ardcallcenter" 
extensionName="ArdCricCallCenter" pluginName="Pi1" controller="Task" 
action="new" arguments="{new_page:current_page}">Nouvel 
Appel</ard:link.action>


all of this is pretty experimental and needs to be polished.
In particular i think we need automatic loading of scripts and 
namespacing conventions for the javacripts and css necessary for the 
viewhelpers.


We can easily make new viewhelpers using extJs instead of jQuery using 
the same principle.

Hope this helps.

Christophe Balisky