//设置树的点击事件
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+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...
在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
综上所述,ExtJs Tree不仅提供了丰富的配置选项来满足多样化的应用场景需求,而且通过高度定制化的API接口,开发者可以根据实际业务逻辑轻松实现复杂的交互效果。这对于构建具有强大数据管理能力的企业级应用来说是...
在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....
本主题主要关注的是ExtJs 中的一个常见布局模式:左侧树形导航与中心Tab选项卡结合的后台通用界面布局。 首先,我们要理解ExtJs中的“布局”(Layouts)。布局是ExtJs组件管理其子组件的方式,决定了子组件如何在...
extjs 左边窗口treepanel 菜单与右边窗口tabpanel 交互 var westPanel = Ext.create('Ext.tree.Panel', { title : '菜单', region : 'west', margins : '0 5 0 0', width : 200, store : store1, ...
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...
综上所述,通过Extjs实现左侧功能树到右侧TabPanel的动态加载,涉及到的主要知识点包括Ext.tree.Panel的使用、Ext.tab.Panel的使用、组件的扩展和别名设置、事件的绑定和处理。掌握了这些知识点,开发者就可以在...
- **Tab Panel**:标签页组件,可以在不同的标签页之间切换内容。 - **Window**:弹出窗口组件,常用于显示额外信息或收集用户输入。 - **Tree Panel**:树形结构组件,适用于展示层级关系数据。 - **Button**:按钮...
通过上述内容,我们已经详细介绍了如何搭建ExtJS开发环境、使用布局管理器、事件机制、窗体、表单、Tree、Tab、Grid、数据展示以及如何使用Ajax技术。希望这些知识点能帮助您更好地理解和使用ExtJS框架。
- **Ext.tab.Panel**:页签面板,用于展示多个页面内容,每个页面作为一个单独的Tab。 6. **Tree 组件** - **Ext.tree.Panel**:用于展示树形结构的数据,包含配置项和方法,如节点的添加、删除和操作。 7. **...
整个程序的入口点是`Ext.onReady`函数,这里创建了三个主要的面板:顶部的`topPanel`,左侧的`leftPanel`(包含折叠布局和树),以及右侧的`rightPanel`(使用了标签页布局Tab Panel)。各个面板通过`region`属性...
`createPicker`方法负责创建下拉面板(`Ext.tree.Panel`)。面板的配置包括: - 使用指定的数据存储(`store`)。 - 设置浮动属性(`floating`)和隐藏属性(`hidden`)。 - 宽度(`width`)和最大高度(`maxHeight`)。 - 根据...
- **组件多样性**:ExtJS 提供了大量的 UI 组件,包括但不限于数据网格(datagrid)、选项卡面板(tab panels)、树状控件(tree controls)、日期选择器等。 - **应用场景**:这些组件特别适用于构建复杂的数据展示...
Sencha ExtJS中还包含了一些常用的组件,如Ext.grid.Panel(网格面板)用于创建交互式的表格数据视图,Ext.tree.Panel(树面板)用于展示层级数据,Ext.form.Panel(表单面板)用于构建用户输入表单,以及Ext.tab....
5. Tree Panel:用于展示树形结构的数据,如文件系统或组织结构。 6. Tab Panel:创建带有多个标签的面板,便于组织和切换内容。 7. Charting:数据可视化组件,可以创建各种图表,如柱状图、饼图、线图等。 通过这...