reRender Problem of javascript widgets

[holger_p]

Hello,

1) I am using javascript controls/widgets (dojo , ext js )
2) These widgets are nested inside an a4j:outputPanel
3) If that outputPanel gets reRendered, the widgets stops working

This behaviour i could reproduce with any js widget - so i think its a very basic problem when using ajax4jsf and js widgets.
I noticed richfaces controls dont have this problem (rich:tree for example,
wil keep its state when reRender)

Well i can only guess whats the reason andf why richfaces components show the right behaviour.Can you explain me this behaviour and maybe a hint how to reproduce that?

Do i have to use the cdk to make my own jsf components?

<h:form>
 <a4j:outputPanel id="updatePanel">
 value: #{testBean.value}

 //shows the desired behavior - tree keeps its state when rerendered
 <rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}"
 reRender="selectedNode" ajaxSubmitSelection="true" switchType="client"
 value="#{simpleTreeBean.treeNode}" var="item">
 </rich:tree>

 <br />
 <div id="tree" style="overflow:auto; border:1px solid #c3daf9;">

 </div>

 //shows the wrong behavior
 //will executed every time the sourrounding outputPanel get rerendered
 <script type="text/javascript">//<![CDATA[
 var myValue = #{testBean.value};
 var tree = new Ext.tree.TreePanel({
 el:'tree',
 loader: new Ext.tree.TreeLoader({
 dataUrl:'treedata.json',
 uiProviders:{
 'myUIProvider': Ext.tree.MyNodeUI
 }
 }),
 selModel: new Ext.tree.CheckNodeMultiSelectionModel(),
 height: '100%',
 animate:true,
 autoScroll:true,
 enableDD:false,
 containerScroll: true,
 dropConfig: {appendOnly:true}
 });

 // set the root node
 var root = new Ext.tree.AsyncTreeNode({
 text: 'Ext JS',
 draggable:false, // disable root node dragging
 id:'source'
 });

 tree.setRootNode(root);

 // render the tree
 tree.render();
 root.expand(false, /*no anim*/ false);
 //
 //]]>
 </script>
 </a4j:outputPanel>

 <a4j:commandLink action="#{testBean.testAction}"
 reRender="updatePanel"
 value="UPDATE"/>
 </h:form>

Thank your very much,
Holger