首先是要展现的效果图：

一：左边的treePanel

 

var orgPanel,appContextmenu,orgTreePanel= new Ext.ux.tree.TreeGrid({            id:'orgTree',            enableDD: true,            region : 'center',            enableSort:false,            border:false,            width:200,            region:"west",            margins:'0 4 0 0',            title:'组织架构设置',            useArrows: true,            animate: true,            columns:[{                header:'组织',                dataIndex: 'text',                sortable:false,                width: 180            }],            dataUrl : 'system/organization/resourceTree.json?type=1',            root: new Ext.tree.AsyncTreeNode({                id:'0',                expanded:true            }),            tbar :[{                iconCls : 'refreshItem',                text : '刷新',                handler : function() {                    orgTreePanel.loader.dataUrl = 'system/organization/resourceTree.json?type=1';                    orgTreePanel.root.reload();                    orgTreePanel.root.expand(true);                }            }, {                text : '展开',                tooltip : '展开',                iconCls : 'addItem',                handler : function(){                    orgTreePanel.root.expand(true);                }            }, {                text : '收起',                tooltip : '收起',                iconCls : 'updateItem',                handler : function(){                    orgTreePanel.collapseAll()                }            }],            contextMenu: new Ext.menu.Menu({                items: [{                    iconCls: 'add',                    text: '新建组织'                }, {                    iconCls: 'edit',                    text: '编辑组织'                }, {                    iconCls: 'delete',                    text: '删除组织'                }],                listeners: {                    itemclick: function(item){                        var nodeDataDel = item.parentMenu.contextNode.attributes;                        var parentNodeData = item.parentMenu.contextNode.parentNode;                        //var nodeData = orgPanel.getSelectionModel().getSelectedNode();                        switch (item.iconCls) {                            case 'add':                                createOrganizationFun(parentNodeData);                                break;                            case 'edit':                                updateOrganizationFun(nodeDataDel,parentNodeData);                                break;                            case 'delete':                                deleteOrganizationFun(nodeDataDel.id,nodeDataDel.children.length==0?true:false);                                break;                        }                        item.parentMenu.hide();                    }                }            }),            listeners: {                afterrender: function(t) {                    treeMask=new Ext.LoadMask(t.getEl(), {msg:"数据加载中..."})                    orgTreePanel.root.expand(true);                    orgPanel = t;                },                contextmenu: function(node, e){                    appContextmenu = false;                    node.select();                    var tree = node.getOwnerTree();                    var c = tree.contextMenu;                    c.contextNode = node;                    c.showAt(e.getXY());                }            }        });

 

二：接着要绑定treepanel的点击事件：动态的根据树的节点去加载右边的内容：

 

//当点击组织机构树，动态加载数据jsp页面内容        orgTreePanel.on('click', function(node) {            if(node.id!='root'){                Ext.getCmp('orgPer').getStore().baseParams={                    id:node.id                };                Ext.getCmp('orgPer').getStore().load();            }            var req=node.id            window.frames['orgSet'].window.sendRequest(req);        });

这里右边的内容的展现，我用到了，frames传参数去加载jsp页面,这里把节点的参数通过frames的方法传进jsp

 

三：右边的带frame的panel:

 

//组织属性设置        var organizationSet = new Ext.Panel( {            header : false,            tbar : [{                xtype : 'buttongroup',                items : [{                    text : '新建组织',                    tooltip : '新建组织',                    iconCls : 'addItem',                    handler : function(){                        var nodeData,node = orgTreePanel.getSelectionModel().getSelectedNode();                        if(node){                            nodeData=node.parentNode;                            createOrganizationFun(nodeData,nodeData.id,nodeData.type);                        }else{                            Ext.Msg.alert('消息提示', '请左边选择一项!');                        }                    }                }, {                    text : '添加部门',                    tooltip : '添加部门',                    iconCls : 'addItem',                    handler : function(){                        var nodeData,node = orgTreePanel.getSelectionModel().getSelectedNode();                        if(node){                            nodeData=node.attributes;                            addDepartmentFun(nodeData,nodeData.id,nodeData.type);                        }else{                            Ext.Msg.alert('消息提示', '请左边选择一项!');                        }                    }                }]            }],            border:false,            region:'north',            height:220,            monitorResize: true,            autowidth:true,            autoheight:true,            frame:true,            layoutConfig: {                animate: true //动画效果启用            },            html: ''        });

 

四：organizationDetail.jsp的内容：

<%@page pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>	
    		
    
    
          
      
			       
组织名称
			       
${organizationSets.name}
		      
		      
			       
组织描述
			       
${organizationSets.desc}
		      
		      
			       
主要负责人
			       
<%--${chargeUser }--%>
		      
		      
			       
上级组织
			       
				
        
         					${superior.name}				
        			
		      
		      
			       
建立人
			       
${organizationSets.creatorName}
		      
		      
			       
建立日期
			       
        
		      
		      
			       
修改人
			       
                ${organizationSets.creatorName}			
		      
		      
			       
修改日期
			       
				
        			
		      
     	     
    

其中

 function sendRequest(req) {

        $('#tabl').load('system/organization/content/'+req+'.htm');         return;     } 用封装的jquery的ajax请求，引入jquery.js就可以用了，通过id获得你想要的table的dom节点，加载请求

五：好了，这里只是介绍Extjs中动态的treePanel和panel的内容的联动效果，其中每个请求对应的java的后台代码就不贴出了。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下