Question

请教ExtJs4.0.7 中tree点击在panel中显示,求大神写个例子也行,要是好的还可以追加分

我想在tree控件点击时新增一个tab页,现在不知道怎么写了...有没有人会的给我说一下啊...

Answer 1

//左边功能树
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'功能菜单',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root:new Ext.tree.TreeNode({
id:'root',
text:'功能菜单',
draggable:false,
expanded:true
})
});

//添加第二个节点(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
//id:'autoLoadPanel',
text:'通过autoLoad打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
n = contentPanel.add({
'id':'autoLoadPanel',
'title':node.text,
closable:true,
autoLoad:{url:'auto.php', scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
alert(Ext.getCmp('contentPanel').getActiveTab().getId()+'1')

}
}
}));

//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit', //如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容
//创建面板内容
createFormPanel:function() {
return new Ext.Window({
buttonAlign:'center',
labelAlign:'right',
frame:false,
bodyBorder:false,
bodyStyle:'padding:25px',
items:[new Ext.Window({title:'wqref',width:100}).show()],
buttons:[{text:'登陆'}, {text:'取消'}]
}).show();
},
//重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
id:'contentPanel',
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
});

auto.php
<?php header('Content-Type:text/html;charset=utf-8'); ?>
<script type="text/javascript">
new Ext.Window({
renderTo:'autoLoadPanel', //必须加上,否则新生成的窗口是在外边
title:'窗口',
width:380,
height:200,
closable:true,
constrain:true,
collapsible:true,
html:'<div style="color:#ff0000;position:absolute;top:40%;left:40%;">弹出的测试窗口</div>'
}).show();
alert(Ext.getCmp('contentPanel').getActiveTab().getId()+'afaefgvw')
</script>