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,
html:'<div id="show" style="overflow:auto;width:100%;height:100%"></div>',
layoutConfig:{
animate:true
}
//iconCls:'nav'
},
tab//初始标签页
]
});
//定义树的跟节点
var root=new Ext.tree.TreeNode({
id:"root",//根节点id
text:"我是树根"
});
// for(i=1,i<3,i++){
// var t = "a"+i;
//if()
// }
//定义树节点
var c1=new Ext.tree.TreeNode({
id:'c1',//子结点id
text:'大儿子'
});
var c2=new Ext.tree.TreeNode({
id:'c2',
text:'小儿子'
});
var c22=new Ext.tree.TreeNode({
id:'c22',
text:'大孙子'
});
root.appendChild(c1);//为根节点增加子结点c1
root.appendChild(c2);//为c1增加子节点c2,相信你已经找到规律了吧^_^
c1.appendChild(c22);//为c1增加子节点c22
//生成树形面板
var tree=new Ext.tree.TreePanel({
renderTo:"show",
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:false//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
});
});
分享到:
相关推荐
ExtJS Tree是Ext JS库中的一个组件,用于创建和展示层次结构的数据,通常表现为树形结构。这个组件在Web应用程序中广泛使用,特别是在需要管理有层级关系的数据时,如文件系统、组织架构或者导航菜单等。动态加载是...
在深入探讨ExtJS中Tree组件的使用之前,我们先来了解一下ExtJS本身。ExtJS是一个用JavaScript编写的开源前端框架,旨在帮助开发者构建复杂、高性能的Web应用程序。它提供了丰富的UI组件库,其中包括Tree(树形)组件...
ExtJS Tree 是一个基于 ExtJS 框架的组件,用于构建可交互的、层级结构的树形控件。在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在...
根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...
ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...
总的来说,这个示例展示了如何结合使用ExtJS的Tree组件、JSON数据格式和Struts2框架来构建一个动态的前端树状视图。通过Ajax技术,实现了前端和后端的无刷新通信,提供了流畅的用户体验。同时,可能还涉及了jQuery和...
ExtJS Tree 需要的数据结构是一个 JSON 数组,每个元素代表树的一个节点。节点可以包含属性如 "cls"(样式类)、"id"(唯一标识)、"leaf"(是否为叶子节点)以及 "children"(子节点数组)。例如: ```javascript ...
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式,它主要用于展示层级关系的数据,例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,提供了丰富的组件化功能和...
ExtJS Tree API提供了丰富的功能,如`TreePanel`,`TreeStore`,`TreeNode`等类,每个类都有许多方法和配置项供开发者使用。 这个压缩包可能包含示例代码、教程文档、练习项目等资源,帮助学习者更好地理解和实践...
通过学习以上知识点并结合提供的源码示例,你将能够有效地在你的项目中使用和定制ExtJS Tree组件,创建出功能强大的树形视图。记得实践是检验理解的最佳方式,尝试修改示例代码,看看会有什么效果,这样能加深对这些...
ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...
在IT领域,特别是Web开发中,使用ExtJS创建复杂且交互丰富的用户界面是常见的实践。在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,...
这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架,广泛应用于构建富互联网应用程序(RIA)。 在ExtJS中,...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。
4. **AJAX 技术**: 在这个项目中,ExtJS Tree 可能使用 AJAX(Asynchronous JavaScript and XML)技术异步地从服务器获取 JSON 数据,这使得用户无需刷新整个页面就能更新树视图。通过 `Ext.Ajax.request` 或者 `Ext...
ExtJS AJAX Tree是一种基于JavaScript的动态树形结构,它利用AJAX技术来异步加载节点数据,无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度,尤其是在处理大量数据时。ExtJS是一个功能丰富的...
在ExtJS中,Tree是一个非常重要的组件,它用于呈现层级结构的数据。在处理Tree节点时,特别是涉及到链接和新窗口打开的情况,有一些特定的技术要点需要注意。 首先,标题“extjs tree 节点 链接 新窗口”指的是在...