`
n15865386136
  • 浏览: 22613 次
社区版块
存档分类
最新评论

Extjs4点击树节点生成Tab或激活Tab

阅读更多
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
		 }
		
	})
})

分享到:
评论
2 楼 n15865386136 2012-11-05  
lusam06 写道
tabs.add(panel);
panel是从数据库中动态获取的,我怎么去根据数据库中的url动态创建并添加到tabs中呢??

panel中可以是一个iframe
用panel的html属性。
1 楼 lusam06 2012-09-23  
tabs.add(panel);
panel是从数据库中动态获取的,我怎么去根据数据库中的url动态创建并添加到tabs中呢??

相关推荐

    ExtJS4下拉树组件

    在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于需要展示分层数据结构的应用场景中。 #### 二、核心...

    Extjs做的treepanel+tab切换页

    4. **动态树(Dynamic Tree)**:动态树是指树形数据可以根据用户的交互动态加载或更新。在这个应用中,当用户点击树节点时,树的`href`属性被用来获取新的内容,并在TabPanel 中加载,实现了内容的动态切换。 5. *...

    extjs4 实现下拉树并支持复选

    总的来说,这个EXTJS4的下拉树组件实现了树形结构的选择,允许用户多选或复选节点。通过自定义事件和方法,我们可以灵活地控制树的显示和用户交互,使其适应项目的具体需求。在实际开发中,可以将此组件引入到你的...

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    开发者可以自定义节点的图标、文字和行为,实现点击节点时加载对应的内容或切换Tab页。 - TreeStore用于存储树形数据,可以连接到后端服务动态加载数据。 - TreePanel是展示TreeStore的视图,配置好后可以插入到...

    Extjs的Tree和Tab使用json做tree数据交互

    在配合Tree使用时,你可以通过点击树节点来切换Tab,或者在选择树节点时动态添加或移除Tab。这通常涉及到事件监听和处理,例如`itemclick`事件。 以下是一个简单的示例,展示了如何在点击Tree节点时切换或创建新的...

    Extjs折叠布局中添加树

    `'itemclick'`事件监听器用于处理用户点击树节点时的行为,例如弹出警告框显示被点击节点的ID、文本和是否为叶子节点的信息。 【动态加载树数据】 通过`Ext.Ajax.request`发送异步请求到服务器获取菜单树的数据,...

    Extjs 通用后台模板| 经典 Tree+Tab+Grid

    这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...

    extjs树形结构实现系统主界面功能框架借鉴.pdf

    这个框架利用EXTJS的强大组件模型,允许用户通过点击树形节点在中心区域打开新的选项卡,展示相应的功能或内容。 1. **树形结构**:EXTJS的TreePanel组件用于构建树形结构。在这个例子中,树形结构的每个叶子节点...

    ExtJs Tree

    - **主Tab面板**:`Ext.mypanels.contentPanel`是一个TabPanel实例,包含了一个或多个可关闭的子项。 - **导航面板**:`navPanel`是一个位于西部区域的Panel,采用手风琴布局并包含两个Treepanel实例。 #### 视口...

    ExtJs4_笔记.docx

    4. **文档处理**:对DOM树进行操作,包括插入、删除、替换节点等。 5. **CSS**:支持CSS样式的添加、删除和查询。 6. **事件**:提供事件监听和触发机制,能处理各种用户交互事件。 **第二章 ExtJs对js基本语法扩展...

    Extjs-多功能下拉树列表

    ### Extjs-多功能下拉树列表 #### 一、引言 在开发用户界面时,开发者经常需要构建具有复杂交互性的组件,以提供更高效、更直观的数据展示和选择方式。其中,下拉树列表是一种非常实用且常见的控件类型,它结合了...

    ExtJS帮助文档

    ### ExtJS基础知识与应用 #### ExtJS简介 ExtJS是一款基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和强大的工具集,可以帮助开发者快速构建现代化的Web应用程序。无论是Ext库的新手还是想要深入了解...

    ExtJS-3.4.0系列目录

    - **Ext.tree.Panel**:用于展示树形结构的数据,包含配置项和方法,如节点的添加、删除和操作。 7. **数据模型(Model)** - **ExtJS Model**:数据实体模型,用于定义数据结构和关联规则,方便数据操作和绑定。...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    `auto.php`可能是一个PHP脚本,用于动态生成或处理数据,如从数据库获取树形结构或处理用户提交的请求。 总结起来,TreePanel和TabPanel是ExtJS中构建复杂UI的重要组成部分。通过灵活地配置和组合这些组件,开发者...

    extjs相关

    文件中定义了 **ModulePanel** 的一个方法 **setTargetOpen**,该方法用于设置当点击树中的节点时的行为。如果点击的是叶子节点,则会在内容面板中创建一个新的标签页,并加载对应的内容: - **tabid**: 标签页的...

    ExtJSWeb应用程序开发指南(第2版)

    6.14.4 将KeyMap或废弃的配置重新生效 6.14.5 获取当前KeyMap配置是否为有效 6.14.6 事件绑定函数 6.15 本章小结 第7章 让ExtJS开始响应事件 第8章 常见Web框架的ExtJS改造 第9章 ExtJS对Ajax的支持 第10章 ...

    ExtJs使用过程中积攒的一些东西

    - TreePanel:用于展现树形结构数据,支持节点的展开、折叠、拖放操作。 - Window:弹出式窗口,可以用来显示表单、消息等。 - Toolbar:工具栏,可以放置按钮、下拉框等组件。 以上只是ExtJs使用中的一部分基础...

    老师整理的extjs学习笔记

    构建动态的树则需要在运行时通过 AJAX 调用等方式动态加载子节点。这通常涉及到使用 `Loader` 组件来处理数据加载逻辑。 #### 十、Menu、Button and Toolbar **10.1 Ext.menu.Menu 综合应用例子** `Ext.menu.Menu...

    Extjs中通过Tree加载右侧TabPanel具体实现

    具体来说,在Extjs4.1版本中,涉及到的主要知识点包括Ext.tree.Panel(用于展示树形结构),Ext.tab.Panel(用于展示Tab页)以及Ext店铺中组件的扩展和事件绑定。 首先,让我们深入了解如何定义左侧的功能树。功能...

Global site tag (gtag.js) - Google Analytics