ExtJS Treepanel and TabPanel used together

Tree.js

Ext.onready (function () {Ext.lib.Ajax.defaultPostHeader + = '; Charset=utf-8 '; var center = new Ext.tabpanel ({ID: ' Tab_ Main ', Region: ' Center ', frame:false,items: [{ID: ' Welcome ', title: ' Home ', HTML: ' <iframe src= ' welcome.jsp ' width= ' 1 00% ' height= ' 100% ' frameboder= ' 0 ' srcolling= ' auto '/> '}],enabletabsrocll:true}; Center.setactivetab (' Welcome ') var tree = new Ext.tree.TreePanel ({title: ' main Menu ', Width:200,autosrocll:true,singleexpand:true,rootvisible:true,ani Mate:true,loader:new Ext.tree.TreeLoader ({dataurl: ' tree.asp '}), listeners: {click:function (node) {var url = node.a Ttributes.url;var id = node.attributes.id;var tab = Center.getitem (' tab_ ' + ID); if (URL) {if (tab) {Center.setactivetab (Ta b);} else {tab = new Ext.panel ({title:node.attributes.text,html: "<iframe src= '" + url+ "' width= ' 100% ' height= ' 100% ' fram Eboder= ' 0 ' srcolling= ' auto '/> ", closable:true,layout: ' Fit ', Frame:false,id: ' tab_ ' + id}); Center.add (tab); center. SetActiveTab (tab);}}}); var root = new Ext.tree.AsyncTreeNode ({id: ' root ', text: ' Root ', expanded:true}); Tree.setrootnode (root); new Ext.viewport ({ Layout: "Border", items: [{region: ' West ', Items:tree,layout: ' Fit ', width:200}, {region: ' Center ', layout: ' Fit ', a Utoscroll:true,id: ' Centerpanel ', Items:center}]});

Index.html

Treeaction.java
Package Com.lin.action;import Java.io.printwriter;import Javax.servlet.http.httpservletresponse;import Org.apache.struts2.servletactioncontext;import Com.opensymphony.xwork2.actionsupport;public class TreeAction Extends Actionsupport {private string Node;public string GetNode () {return node;} public void Setnode (String node) {this.node = node;} @Overridepublic String Execute () throws Exception {HttpServletResponse response = Servletactioncontext.getresponse (); Response.setcontenttype ("Text/json; Charset=utf-8 "); PrintWriter pw = Response.getwriter (); SYSTEM.OUT.PRINTLN (node), if ("root". Equals (node)) {Pw.append ("[{ID: ' Module1 ', Text: ' Module 1 ', Leaf:false},{id: ' Module2 ', Text: ' Module 2 ', Leaf:true,url: ' module2.jsp '}] "); else {pw.append ("[{ID: ' module3 ', Text: ' Module 3 ', Leaf:true,url: ' module3.jsp '}]"); Pw.flush ();p w.close (); return NONE;}}


Implementation results: