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>