//设置树的点击事件
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var idSrcString = node.id;
var idSrcArr = idSrcString.split("|");
var n = tab.add({
'id' : idSrcArr['0'],
'title' : node.text,
closable:true,
html : "<iframe height='100%' width='100%' src='./php/"+idSrcArr['1']+".php'></iframe>"
});
}
tab.setActiveTab(n);
}
}
//生成标签页
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});
Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系统菜单',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'后台',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
}]
},
tab//初始标签页
]
});
//设置树形面板
var Tree = Ext.tree;
// set the root node
var root = new Tree.AsyncTreeNode({
text: '后台',
draggable:false,
id:'root'
});
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
root:root,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'treedata.php'
})
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
tree.on('click',treeClick);
//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
});
详细解决方案
ExtJs 兑现 tree + tab
热度:311 发布时间:2012-09-28 00:03:35.0
相关解决方案
- Extjs grid 失去选中行的列数据
- extjs 后台有数据,但是返回到页面为空,jsonStore加载错误,这是咋回事
- 【EXTJS】iframe里嵌套ext.window,怎样使ext.window弹出到iframe外,该怎么解决
- Tomcat + extjs 入门有关问题
- extjs ColumnModel 怎么实现表格中的数据小数点对齐
- Extjs 变量前的一个加号代表什么意思?解决方法
- extjs grid 怎么实现 行选中变色
- EXTJS grid的getView的refresh步骤报this.grid为空或不是对象
- EXTJS grid的getView的refresh方法报this.grid为空或不是对象解决办法
- 解决libxml/tree.h not found有关问题
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索
- extjs window 弹出框有关问题 怪事
- ExtJs ComboBox 下拉数据较多时,怎么提供模糊搜索
- EXTJS GridPanel怎么设置多选
- EXTJS 在 IE 中 数据丢失。求解决方法。
- extjs grid 动态设置行单元格可编辑
- EXTJS DateField 效果显示解决方法
- Extjs Menu 实现动态多级菜单
- ExtJs ComboBox 上拉数据较多时,怎么提供模糊搜索
- Extjs TreeStore 的施用
- Extjs TreeStore 的应用
- 会用jquery,dwr,再有没有必要学习dojo,extjs
- extjs+php ,大家来看看是小弟我的json输出的有关问题,还是小弟我的extjs没有写对呢
- 请教上哪位高手知道,column-tree.css中zoom是什么意思,在上面这代码里面起什么作用
- extjs grid表的显示有关问题
- extJS 在IE8里边什么都不显示
- EXTJS 显示图片有关问题 来个大神指教下 多谢
- EXT tree 真么平添单击事件
- Extjs 前后台数据交互有关问题
- ExtJS 怎么嵌入百度mapAPI