点击Ext tree 节点，激活tab节点

最新推荐文章于 2021-03-16 09:15:27 发布

最新推荐文章于 2021-03-16 09:15:27 发布 · 159 阅读

文章标签：

#EXT #Java

Ext 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用ExtJS创建树形菜单并实现与标签页组件的数据交互功能，包括点击树节点时更新标签页内容及显示方式。

tree的定义：


    var tree = new Tree.TreePanel({
        el:'tree-div',
        title:"Test Tree",
        enableDD:true,
        width:200,
        height:420,
        containerScroll: true, 
        loader: new Ext.tree.TreeLoader({dataUrl:'ExtTreeServlet'})
    });

tabpanel的定义：


   new Ext.TabPanel({
                	id:'tabs',
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    tabPosition:'top',
                    items:[{
                    	id:'tab1',
                        contentEl:'center1',
                        title: 'Close Me',
                        closable:true,
                        autoScroll:true
                    },{
                    	id:'tab2',
                        contentEl:'center2',
                        title: 'Center Panel',
                        autoScroll:true,
                        autoLoad:'LoadTabContent'
                    }]
                })

ExtTreeServlet.java中的代码：


String result = "[{id:'1',text:'01',children:[" +
								"{text:'01-01',leaf:true}," +
								"{text:'01-02',children:[" +
										"{text:'01-02-01',leaf:true}," +
										"{text:'01-02-02',leaf:true}"+
								"]}," +
								"{text:'01-03',leaf:true}]}," +
						"{text:'02',leaf:true},{text:'04',leaf:true}]";

tree的click事件：


tree.on('click',test);
function test(node,e){
	node.select();
	var selectedNode = tree.getSelectionModel().getSelectedNode();
         //得到tab对象的两种方式：
	//var tab = Ext.getCmp('tab2');
	var tabs = Ext.getCmp('tabs');
	var tab = tabs.getItem('tab2');

	//改变tab内容的第一种方式	
	tab.getUpdater().update('LoadTabContent?aa=' + selectedNode.id);
         //改变tab内容的第二种方式
	//tab.load({ 
	//	 url: 'LoadTabContent?aa=' + selectedNode.id, 
	//	 nocache: true, 
	//	 scope: this, 
	//	 scripts: true 
	//	}); 
    	tab.setTitle("Modify");
	tab.show();
	}

先点击tree，激活tab时加载数据的方式：


tab.addListener('activate',function (){test1(this)});
		function test1(obj){
			var tree=Ext.getCmp('tree');var selectedNode = tree.getSelectionModel().getSelectedNode();
			obj.load({ 
			 url: 'LoadTabContent?action=loadVersionContent&aa=' + selectedNode.id, 
			 nocache: true, 
			 scope: this, 
			 scripts: true 
		});

获取tab的内容和客户端修改tab的内容


var tabs = Ext.getCmp('tabs');
    var tab = tabs.getItem('tab1');
   	tab.body.dom.innerHTML='<textarea style="width:100%;height:100%">' + tab.body.dom.innerHTML+ '</textarea>';