有关EXT的tree叶子节点的click事件，弹出一个tabpanel

哦，就是让图二中的东西在图一当中首页那边的tabpanel中显示出来。

render(/*这里写你要放到那个区域*/)

Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
items : [{
region : "west",
xtype : "panel",
layout : "accordion",
title : "导航",
width : 200,
layoutConfig : {
titleCollapse : false,
animate : true,
collapseFirst : true,
sequence : true,
titleCollapse : true
},
items : [{
xtype : 'treepanel',
title : '刷卡机',
iconCls : "checkIcon",
autoScroll : true,
border : false,
id : "mytree",
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [{
text : '初始操作',
linkUrl : 'page/area/1.html',
leaf : true
}, {
text : '读取操作',
linkUrl : 'page/area/recharge.jsp',
leaf : true
}, {
text : '初始化卡',
linkUrl : url + '/ijsp.do',
leaf : true
}]
}),
rootVisible : false,
listeners : {
"click" : {
fn : onTreeNodeClick
}
}
}, {
xtype : 'treepanel',
title : '手持机',
iconCls : "checkIcon",
autoScroll : true,
border : false,
id : "mytree2",
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [{
text : '充值',
linkUrl : url + '/ijsp.do',
leaf : true
}, {
text : '扣款',
linkUrl : url + '/ijsp.do',
leaf : true
}, {
text : '初始化卡',
linkUrl : url + '/ijsp.do',
leaf : true
}]
}),
rootVisible : false,
listeners : {
"click" : {
fn : onTreeNodeClick
}
}
}, {
xtype : 'treepanel',
title : '其他',
iconCls : "checkIcon",
autoScroll : true,
border : false,
id : "mytree3",
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [{
text : '充值',
linkUrl : 'cz',
leaf : true
}, {
text : '扣款',
linkUrl :'kk',
leaf : true
}, {
text : '初始化卡',
linkUrl : 'csh',
leaf : true
}]
}),
rootVisible : false,
listeners : {
"click" : {
fn : onTreeNodeClick
}
}
}] }, {
id : "MainTab",
region : "center",
activeTab : 0,
autoScroll : true,
split : true,
xtype : 'tabpanel',
items : {
closeable : true,
title : '首页',
html : '欢迎页面 '
}
}]
});

function onTreeNodeClick(_node, _e) {
if (_node.isLeaf()) {
var _nodeText = _node.attributes.text;
var _nodeLink = _node.attributes.linkUrl;
var _nodeId = _node.attributes.id;
addPanel(_nodeText, _nodeLink, _nodeId)
}
} function addPanel(_nodeText, _nodeLink, _nodeId) {
var tabId = "tab_" + _nodeId;
alert(tabId);
var centerPanel = Ext.getCmp("MainTab");
if (centerPanel != "undefined") {
var tab = centerPanel.getComponent(tabId);
var subMainId = 'tab_' + _nodeId + '_main';
var xx="";
if(_nodeLink=='cz'){
xx=option;
}
if(_nodeLink=='kk'){
xx=option2;
}
Ext.apply(xx, {
id : tabId
});
var nav = new Ext.FormPanel(xx);
if (!tab) {
var tab = centerPanel.add(nav);
centerPanel.setActiveTab(nav);
} else {
centerPanel.setActiveTab(tab);
}
}
}
function onActiveTabSize() {
var centerPanel = Ext.getCmp("MainTab");
if (centerPanel != null) {
var w = centerPanel.getActiveTab().getInnerWidth();
var h = centerPanel.getActiveTab().getInnerHeight();
var Atab = centerPanel.getActiveTab().id;
var submain = Ext.getCmp(Atab + "_main");
if (submain) {
submain.setWidth(w);
submain.setHeight(h);
}
}
}

Ext.onReady(function (){
new Ext.FormPanel({
renderTo: Ext.getBody(),
width:800,
height:480,
title:'区域1',
frame: true,
layout:'form',
items : [{xtype:'panel',
fieldLabel:'员工工号',
layout:'column',
isFormField:true,
items:[{
xtype:'textfield',
id:'usercode',
style:'margin-left: 5px'
},{
xtype:'button',
text:'查询',
style:'margin-left: 30px',
handler: function(){
var da=Ext.getCmp('usercode').getValue();
if(da==''){
Ext.Msg.alert('操作提示', '请输入员工工号！');
return;
}
Ext.Ajax.request({
url:url+'/toDataByCode.do',
success:function(response) {
var data = Ext.util.JSON.decode(response.responseText);
  if(data != null){
    Ext.getCmp('usercode').setValue(data.userCode);
    Ext.getCmp('username').setValue(data.userName);
    Ext.getCmp('balance').setValue(data.balance);
    Ext.getCmp('daynumber').setValue(data.dayNumber);
    Ext.getCmp('oncealamount').setValue(data.oncealAmount);
    Ext.getCmp('userid').setValue(data.userId);
    }else{
    Ext.Msg.alert('操作提示', '该记录不存在！');
    }
    },
params: { code:da }
});
}
},{
xtype:'button',
text:'列表',
style:'margin-left: 30px',
handler:Pop
},{
xtype:'label',
text:'员工姓名:',
style:'margin-left: 30px;margin-top: 4px'
},{xtype:'textfield',
id:'username',
style:'margin-left: 5px'
}]
},
{xtype:'panel',
layout:'column',
fieldLabel:'初始金额',
items:[{xtype:'textfield',
id:'balance',
style:'margin-left: 5px'
},{xtype:'label',
text:'卡号:',
style:'margin-left: 30px;margin-top: 4px'
},{xtype:'textfield',
style:'margin-left: 101px',
id:'cardId'
}]
},{xtype:'panel',
layout:'column',
fieldLabel:'日最多消费次数',
items:[{xtype:'textfield',
id:'daynumber',
style:'margin-left: 5px'
},{xtype:'label',
text:'日最大消费金额:',
style:'margin-left: 30px;margin-top: 4px'
},{xtype:'textfield',
id:'oncealamount',
style:'margin-left: 41px'
}]
},{xtype:'panel',
layout:'column',
fieldLabel:'开卡时间',
items:[{
xtype:'datefield',
width:120
},{xtype:'textfield',
id:'userid',
hidden:true
}]
},
{xtype:'panel',
layout:'column',
title:'区域2',
items:[{
xtype:'label',
text:'端口:',
style:'margin-top:5px'
},{xtype:'combo',
id : 'combo',
allowBlank : false,
typeAhead : true,
editable : false,
hiddenName : 'trainid',
triggerAction : 'all',// 选择模式
lazyRender : true,
forceSelection : false,
selectOnFocus : true,
width : 180,
mode : 'remote',
valueField : 'port',
displayField : 'port',
store : new Ext.data.Store({
url : url+'/getPorts.do',
reader : new Ext.data.JsonReader({
fields : ['port', 'id'],
root : 'list',
totalProperty : 'totalSize'
}, ['port', 'id']),
remoteSort : true
}),
//
listeners: {
        beforequery: function(qe){
qe.combo.setValue("");
            delete qe.combo.lastQuery;
        }
    }
},{
xtype:'label',
text:'波特率:',
style:'margin-top:5px;margin-left:150px'
},{xtype:'combo',
store:['57600','115200']
}]
},{xtype:'panel',
layout:'fit',
items:[{
xtype:'fieldset',
title:'卡号',
width:100,
layout:'table',
style:'margin-top:10px',
items:[{
xtype:'label',
text:'SN:'
},
{xtype:'textfield',
id:'sn',
width:200,
style:'margin-left:10px'
},{
xtype:'button',
text:'读取SN',
style:'margin-left:30px',
handler:function(){
var port1 =  Ext.getCmp('combo').getValue();
if(port1==''){
Ext.Msg.alert('操作提示', '请选择端口号！');
return;
}
Ext.Ajax.request({
   url: url+'/readSN.do',
   success: function(response) {
    var data = Ext.util.JSON.decode(response.responseText);
    if(data.status == true){
         Ext.getCmp('sn').setValue(data.cardNumber);
               }
            else{
       Ext.Msg.alert('操作提示','卡号读取失败');
    }
    },
    params: {port: port1}
   });

}
},{
xtype:'button',
text:'初始化卡',
style:'margin-left:30px',
handler:function(){
var id1=Ext.getCmp('userid').getValue();
var code1=Ext.getCmp('sn').getValue();
Ext.Ajax.request({
url:url+'/toInitCard.do',
success:function(response) {
//alert(response.responseText);
var data = Ext.util.JSON.decode(response.responseText);
if(data!=null){
Ext.Msg.alert('操作提示：','初始化卡成功！');
Ext.getCmp('cardId').setValue(data.id);
}else{
Ext.Msg.alert('操作提示：','初始化卡失败！');
}
},
params: { id:id1,code:code1 }
});
}
},{
xtype:'button',
text:'清空',
style:'margin-left:30px',
handler:function(){
Ext.Msg.confirm('警告！','你确定要清空卡信息？');
}
}]
}]
},{xtype:'panel',
layout:'fit',
items:[{
xtype:'fieldset',
title:'充值',
width:100,
layout:'table',
items:[{
xtype:'label',
text:'请输入金额:'
},
{xtype:'textfield',
value:50,
style:'margin-left:10px'
},{xtype:'label',
   text:'(元)',
   style:'margin-left:10px'
},{
xtype:'button',
text:'充值',
style:'margin-left:30px'
}]
}]
},{xtype:'panel',
layout:'fit',
items:[{
xtype:'fieldset',
title:'扣款',
width:100,
layout:'table',
items:[{
xtype:'label',
text:'请输入金额:'
},
{xtype:'textfield',
value:50,
style:'margin-left:10px'
},{xtype:'label',
   text:'(元)',
   style:'margin-left:10px'
},{
xtype:'button',
text:'扣款',
style:'margin-left:30px'
}]
}]
}
]
})
})两段代码，不同页面，想通过传递URL的方式点击tree的叶子节点把panel放置到center的区域。咋整呢？？？

var txtTreePanel=Ext.create('Ext.tree.Panel', {
    height: '100%',
    store: store,
    rootVisible: false,
listeners : {
        itemclick : function(view,re){
            alert(re.data.text);
        }
    }
});

调试易

有关EXT的tree叶子节点的click事件，弹出一个tabpanel

解决方案 »