`

Ext6 treePanel默认加载两级或多级本地树信息其他加载远程数据

    博客分类:
  • Ext
阅读更多

代码使用如下:

 

Ext.define('user.view.AreaTree', {

extend : 'Ext.tree.Panel',

title : '树目录',

width : 200,

height : 200,

region : 'west',

store : new Ext.data.TreeStore({  //这里不能指定root,否则默认不会加载,会直接走proxy远程

proxy : {

type : 'ajax',

url : 'http://xxx:80/remote.jsp'

}

}),

root : {  //在treePanel上指定root,先加载treePanel上的root数据,其次展开再通过store进行proxy加载

id : '0',

expanded : true,

children : [{

id : '1',

text : '一级分类1'

}, {

id : '2',

text : '一级分类2'

}]

},

rootVisible : false,

border : false,

autoScroll : true,

listeners : {

itemcontextmenu : function(th, record, item, index, event, eOpts) {

event.preventDefault();

Ext.create('Ext.menu.Menu', {

width : 100,

height : 100,

floating : true, // usually you want this set

items : [{

text : '新建',

iconCls : 'add16',

handler : function() {

alert('xxxx');

}

}, {

text : '修改'

}, {

text : '删除'

}]

}).showAt(event.getXY());

}

                })

 

 Ext6,treePane和treeStore关于层级加载顺序,还有待学习,这里先做笔记

分享到:
评论

相关推荐

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是两个关键的组件,它们支持动态加载本地数据,提高了用户体验。理解这两个组件的工作原理和如何利用`Store`、`Ajax`、`TreeStore`进行数据加载,是EXTJS开发中的重要...

    Ext TreePanel Checked Ext复选框树

    综上所述,"Ext TreePanel Checked Ext复选框树"是一个强大的前端组件,它提供了便捷的多级选择功能,并且可以通过丰富的API和配置选项进行高度定制,以适应各种业务场景。在实际项目中,正确理解和使用这一特性,...

    简单的EXT加载数据的例子

    在EXT框架中,Treepanel和Gridpanel是两个核心组件,它们分别用于展示和操作树形结构数据以及表格数据。本示例将详细介绍如何在EXT中加载数据,特别是通过EXT的Treepanel来呈现一个生成的树形结构。 首先,我们要...

    Ext TreePanel

    TreePanel可以与Ext.data.TreeStore配合使用,TreeStore负责加载和管理树形数据。TreePanel中的每个节点通常表示为一个条目,这些条目可以通过配置不同的列来进行展示和编辑。 在描述中提到的`Ext.grid....

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...

    ext.net Menu + TreePanel

    它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...

    Extjs 加载数据库 生成tree

    子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就可以知道是哪一级的节点 ...

    TreePanel 带复选框的树

    这个"带复选框的树"是指在TreePanel中每个节点都带有可选中的复选框,用户可以通过这些复选框来选择或操作树形结构中的数据。这种设计通常用于权限管理、目录选择、层级关系配置等场景,使得用户能够直观地对多级...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    TreePanel是一个显示层次数据的组件,通常用于导航或组织结构展示。它可以包含多个节点(Node),每个节点又可以拥有子节点,形成一个树形结构。在实际应用中,经常需要对TreePanel中的节点进行操作,比如获取所有被...

    Ext.net TreePanel的Checkbox操作及父子节点联动(修正)

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,例如文件系统、组织结构等。本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果,特别是针对之前存在的Bug进行...

    ext.net 中树加载及实现方式,初学者可以参考

    1. **树的数据源**:EXT.NET的树形控件可以通过两种方式加载数据:同步加载(Synchronous)和异步加载(Asynchronous)。同步加载是在页面加载时一次性加载所有节点,适用于数据量较小的情况。而异步加载则在用户...

    DWR方式动态加载EXT.Tree

    当树Panel初始化完成后,我们可以通过DWR调用服务器端的方法,将返回的JSON数据传递给TreePanel的`loadData`方法,或者在TreePanel的`loader`配置中指定的回调函数内处理数据,然后使用`expandNode`或`refresh`方法...

    ext 动态加载的树源码

    7. **异步与同步加载**:EXT树支持异步和同步两种加载方式。异步加载更常见,它在后台进行,不会阻塞用户界面。同步加载则会等待数据加载完成后再更新界面,一般只在数据量较小或有特定需求时使用。 8. **优化技巧*...

    在VS下利用Ext4.2的TreePanel的简单demo

    在Visual Studio(VS)开发环境中,使用ExtJS的TreePanel组件可以创建动态的、交互式的树形结构数据展示。本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo,结合数据库进行后台的数据操作,包括增、...

    多叉树结合JavaScript树形控件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)

    1. 树形控件的实现:通过 Ext JS 的 TreePanel 和 TreeLoader,从服务器获取 JSON 数据并动态构建树形结构。 2. 文件一 `branchTree.html`:展示了如何配置 Ext JS 的 TreePanel,设置加载器以请求服务器数据,以及...

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

    ExtJS是一款强大的JavaScript框架,用于构建富客户端应用程序,而TreePanel和TabPanel是其核心组件,分别用于展现树形数据结构和实现多标签页界面。 首先,让我们详细了解一下TreePanel。TreePanel是ExtJS中用于...

    treepanel动态加载数据实现代码

    在本文中,我们将深入探讨如何在ExtJS的TreePanel组件中实现动态加载数据。TreePanel是ExtJS库中的一个功能强大的组件,它允许用户以树形结构展示数据。动态加载数据是一种优化用户体验的方法,只有当用户展开节点时...

    Ext+json+jsp动态加载树

    "Ext+json+jsp动态加载树"的项目就是一个典型的示例,它展示了如何利用ExtJS框架、JSON数据格式以及JavaServer Pages(JSP)技术来实现一个可动态加载数据的树形视图。下面将详细介绍这些知识点: 1. **ExtJS框架**...

Global site tag (gtag.js) - Google Analytics