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>';