Ext.onReady(function(){
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true,id:'id1'},
{ text: "homework", expanded: true, id:'id2',children: [
{ text: "book report", leaf: true, id:'id3'},
{ text: "alegrbra", leaf: true,id:'id4'}
] },
{ text: "buy lottery tickets", leaf: true ,id:'id5'}
]
}
});
var tree=Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
var tabs=Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
tree.on('itemclick',function(view,record,item,index,e,opts){
//获取当前点击的节点
var treeNode=record.raw;
var id = treeNode.id;
var text=treeNode.text;
//获取点击的树节点相同的tab标签
var tab = tabs.getComponent(id);
if(!tab){//如果不存在
tabs.add({//用点击树的节点的ID、text新建一个tab
id:id,
title:text
})
}else{//如果存在
tabs.setActiveTab(tab)//Active
}
})
})
分享到:
相关推荐
在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于需要展示分层数据结构的应用场景中。 #### 二、核心...
4. **动态树(Dynamic Tree)**:动态树是指树形数据可以根据用户的交互动态加载或更新。在这个应用中,当用户点击树节点时,树的`href`属性被用来获取新的内容,并在TabPanel 中加载,实现了内容的动态切换。 5. *...
总的来说,这个EXTJS4的下拉树组件实现了树形结构的选择,允许用户多选或复选节点。通过自定义事件和方法,我们可以灵活地控制树的显示和用户交互,使其适应项目的具体需求。在实际开发中,可以将此组件引入到你的...
开发者可以自定义节点的图标、文字和行为,实现点击节点时加载对应的内容或切换Tab页。 - TreeStore用于存储树形数据,可以连接到后端服务动态加载数据。 - TreePanel是展示TreeStore的视图,配置好后可以插入到...
在配合Tree使用时,你可以通过点击树节点来切换Tab,或者在选择树节点时动态添加或移除Tab。这通常涉及到事件监听和处理,例如`itemclick`事件。 以下是一个简单的示例,展示了如何在点击Tree节点时切换或创建新的...
`'itemclick'`事件监听器用于处理用户点击树节点时的行为,例如弹出警告框显示被点击节点的ID、文本和是否为叶子节点的信息。 【动态加载树数据】 通过`Ext.Ajax.request`发送异步请求到服务器获取菜单树的数据,...
这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...
这个框架利用EXTJS的强大组件模型,允许用户通过点击树形节点在中心区域打开新的选项卡,展示相应的功能或内容。 1. **树形结构**:EXTJS的TreePanel组件用于构建树形结构。在这个例子中,树形结构的每个叶子节点...
- **主Tab面板**:`Ext.mypanels.contentPanel`是一个TabPanel实例,包含了一个或多个可关闭的子项。 - **导航面板**:`navPanel`是一个位于西部区域的Panel,采用手风琴布局并包含两个Treepanel实例。 #### 视口...
4. **文档处理**:对DOM树进行操作,包括插入、删除、替换节点等。 5. **CSS**:支持CSS样式的添加、删除和查询。 6. **事件**:提供事件监听和触发机制,能处理各种用户交互事件。 **第二章 ExtJs对js基本语法扩展...
### Extjs-多功能下拉树列表 #### 一、引言 在开发用户界面时,开发者经常需要构建具有复杂交互性的组件,以提供更高效、更直观的数据展示和选择方式。其中,下拉树列表是一种非常实用且常见的控件类型,它结合了...
### ExtJS基础知识与应用 #### ExtJS简介 ExtJS是一款基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和强大的工具集,可以帮助开发者快速构建现代化的Web应用程序。无论是Ext库的新手还是想要深入了解...
- **Ext.tree.Panel**:用于展示树形结构的数据,包含配置项和方法,如节点的添加、删除和操作。 7. **数据模型(Model)** - **ExtJS Model**:数据实体模型,用于定义数据结构和关联规则,方便数据操作和绑定。...
`auto.php`可能是一个PHP脚本,用于动态生成或处理数据,如从数据库获取树形结构或处理用户提交的请求。 总结起来,TreePanel和TabPanel是ExtJS中构建复杂UI的重要组成部分。通过灵活地配置和组合这些组件,开发者...
文件中定义了 **ModulePanel** 的一个方法 **setTargetOpen**,该方法用于设置当点击树中的节点时的行为。如果点击的是叶子节点,则会在内容面板中创建一个新的标签页,并加载对应的内容: - **tabid**: 标签页的...
6.14.4 将KeyMap或废弃的配置重新生效 6.14.5 获取当前KeyMap配置是否为有效 6.14.6 事件绑定函数 6.15 本章小结 第7章 让ExtJS开始响应事件 第8章 常见Web框架的ExtJS改造 第9章 ExtJS对Ajax的支持 第10章 ...
- TreePanel:用于展现树形结构数据,支持节点的展开、折叠、拖放操作。 - Window:弹出式窗口,可以用来显示表单、消息等。 - Toolbar:工具栏,可以放置按钮、下拉框等组件。 以上只是ExtJs使用中的一部分基础...
构建动态的树则需要在运行时通过 AJAX 调用等方式动态加载子节点。这通常涉及到使用 `Loader` 组件来处理数据加载逻辑。 #### 十、Menu、Button and Toolbar **10.1 Ext.menu.Menu 综合应用例子** `Ext.menu.Menu...
具体来说,在Extjs4.1版本中,涉及到的主要知识点包括Ext.tree.Panel(用于展示树形结构),Ext.tab.Panel(用于展示Tab页)以及Ext店铺中组件的扩展和事件绑定。 首先,让我们深入了解如何定义左侧的功能树。功能...