0 0

extjs中在tree点一个节点出现一个panel得实例30

如题 ,本人是个初学者,写了搞了好多每次都报错。请哪位高手给个实例代码。在一个viewport里左边一个树形菜单,上面一个log
中间是tab的显示,下面是版权。帮忙解决解决感激不敬
2010年1月12日 11:22

3个答案 按时间排序 按投票排序

0 0

采纳的答案

稍等?你是不是还要点树节点,左边多出来Panel啊?

在上面定义个变量例如tab,然后吧43~52行改成

		}, tab = new Ext.TabPanel({
			region : 'center',
			xtype : 'tabpanel',
			activeTab : 0,
			closable : true,
			items : [{
				title : '欢迎',
				html : '欢迎登陆后台,请在左侧选择管理项目'
			}]
		})]


之后响应TreeNode的click事件,直接tab.add就可以了。

2010年1月12日 14:58
0 0

这个问题出现在了错误的论坛的错误的版面。。。

2010年1月12日 17:41
0 0

new Ext.Viewport({
	layout : 'border',
	items : [{
		region : 'north',
		html : '这里放logo的html代码',
		height : 30,
		bodyCssClass : 'top',
		border : false
	}, {
		xtype : 'panel',
		region : 'center',
		layout : 'border',
		items : [{
			region : 'west',
			xtype : 'treepanel',
			width : 200,
			autoScroll : true,
			root : {
				text : '网站',
				nodeType : 'async',
				useArrows : true,
				animate : true,
				containerScroll : true,
				loader : new Ext.tree.TreeLoader({
					dataUrl : 'xxx.ror',
					listeners : {
						beforeload : function(l, n) {
							var path = n == tree.root ? '' : n.text;
							while (n.parentNode && n.parentNode.parentNode) {
								n = n.parentNode;
								path = n.text + '\\' + path;
							}
							l.baseParams.type = type;
							l.baseParams.path = path;
						}
					}
				}),
				root : {
					text : '网站',
					nodeType : 'async'
				}
			}
		}, {
			region : 'center',
			xtype : 'tabpanel',
			activeTab : 0,
			closable : true,
			items : [{
						title : '欢迎',
						html : '欢迎登陆后台,请在左侧选择管理项目'
					}]
		}]
	}, {
		region : 'south',
		html : '这里放版权的html代码',
		height : 30,
		border : false
	}]
});


稍微测试通过。

2010年1月12日 14:56

相关推荐

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    Ext.tree.Panel是ExtJS中的一个组件,用于展示树状数据结构。它可以显示多级嵌套的节点,支持拖放操作,节点的展开和折叠,以及各种事件监听。在这个实例中,Ext.tree.Panel可能被用来展示由Accordion布局管理的各个...

    解决 extjs2.2 给tree-panel 添加 checkbox 的add-on

    在EXTJS 2.2版本中,Tree Panel是EXTJS框架中用于展示树形结构数据的一个组件,但原生的EXTJS 2.2并未提供内置的复选框(checkbox)功能,这对于需要用户进行多选操作的场景来说是一个限制。标题提到的“解决extjs...

    ExtJs_TreeDemo

    "ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,树形菜单(Tree)是通过`Ext.tree.Panel`类来创建的。这个类提供了丰富的配置选项和事件处理机制,使得开发者可以定制各种交互...

    ExtJs Tree

    根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...

    extjs ajax tree(js动态树,无需递归)

    在ExtJS中,创建一个AJAX树通常涉及以下几个步骤: 1. **引入ExtJS库**:首先,你需要在HTML页面中引入ExtJS库的CSS和JavaScript文件,这将提供必要的UI组件和功能。 2. **定义树的配置**:创建一个`Ext.tree....

    extjs4 treeGrid实例

    在本实例中,我们关注的是如何利用ExtJS4实现一个TreeGrid来创建一个report报表。 首先,理解TreeGrid的基础概念。TreeGrid是树形结构和网格的结合,它将树节点的层次结构与表格的列布局结合在一起,每个树节点都...

    ExtJS布局之border实例

    当用户点击左侧树形菜单中的“培训项目”节点时,会在右侧显示出一个新的界面,该界面包含一个树形菜单和一个面板。进一步地,当用户点击右侧树形菜单的节点时,面板会根据节点的ID动态加载相关的数据。 #### 三、...

    EXTJS 树的实例

    树(Tree)是EXTJS中一个重要的组件,它允许以层级结构展示数据,常用于目录、组织架构或者文件系统的展示。在这个“EXTJS 树的实例”中,我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** ...

    extjs学习案例, 例子有 panel ,widow,tree,grid,form, store……

    本文将详细讲解这些知识点,帮助无论是初学者还是有一定基础的学习者提升在ExtJS开发中的技能。 首先,Panel是ExtJS中最基本的容器,可以包含其他组件,如按钮、文本框等。Panel可以设置标题、边框、内边距等属性,...

    extjs4 入门基础,form、grid、tree

    在ExtJS中,使用`Ext.tree.Panel`创建树。`rootVisible`属性控制是否显示根节点,`store`配置项与网格类似,用于绑定数据。树节点可以通过`children`属性定义子节点,或者通过异步加载数据。树视图还支持节点的展开/...

    ExtJS5.0 树形菜单实例

    在"Extjs5.0TreeDemo"文件中,应该包含了完整的HTML、CSS 和JavaScript 代码,演示了如何创建和使用一个树形菜单。通过阅读和分析这些代码,可以更好地理解上述概念并实际操作。 通过以上步骤,你可以成功地使用...

    EXTjs 简单布局实例

    Ext 漂亮界面设计 ...collapseMode:'mini',//在分割线处出现按钮 collapsible: true, margins:'0 0 5 5', loader:new Ext.tree.TreeLoader({ dataUrl:'extExampleTree.json', requestMethod: 'GET' }),

    extjs实践大量实例讲解

    在这个例子中,我们创建了一个窗口,并设置了一些基本属性,如标题、宽度和高度。窗口中包含了一个面板组件,面板内部显示了文本“Hello World!”。 ### 示例 2:使用网格视图展示数据 ```javascript Ext.create('...

    Extjs折叠布局中添加树

    在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...

    ExtJS4.1实现的mvc模式经典入门案例

    在本案例中,`mvc_tree`可能是一个树形视图,展示了数据的层次结构。例如: ```javascript Ext.create('Ext.tree.Panel', { title: 'Simple Tree', store: Ext.data.TreeStore({ root: { expanded: true, ...

    Extjs4 下拉树 TreeCombo

    在ExtJS 4中,TreeCombo主要由两部分组成:一个普通的ComboBox和一个内嵌的TreeView。当用户展开ComboBox时,内部的TreeView显示,用户可以浏览和选择树形结构中的节点。一旦用户选择了某个节点,ComboBox的输入框将...

    ExtJS中editable-column-tree组件的使用 示例

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套功能丰富的组件,包括表格、树形视图、图表等,使得开发人员能够创建复杂且用户友好的界面。本篇将详细介绍ExtJS中的...

    关于extjs treepanel复选框选中父节点与子节点的问题

    在本例中,我们关注的是如何实现一个带有复选框的TreePanel,以便在选中父节点时自动选中所有子节点,而只有当所有子节点都未被选中时,父节点才能被取消选中。 首先,我们创建了一个新的Ext.tree.TreePanel实例,...

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

    在Extjs中,实现左侧功能树到右侧TabPanel的动态加载是一个常见的需求。为了完成这一需求,开发者需要利用Extjs的组件和事件系统。具体来说,在Extjs4.1版本中,涉及到的主要知识点包括Ext.tree.Panel(用于展示树形...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    在ExtJS中,树形控件可以通过`Ext.tree.Panel`创建,每个节点可以包含子节点,并支持展开、折叠、选择等操作。 2. **表格(Grid)**:右边的表格组件是数据展示和操作的核心,它能够显示大量数据并提供排序、筛选、...

Global site tag (gtag.js) - Google Analytics