`

ext tree

    博客分类:
  • ext
 
阅读更多
<script type="text/javascript">    Ext.onReady(function(){        var tree= new Ext.tree.TreePanel({            el:'tree',            loader:new Ext.tree.TreeLoader()        });                var root = new Ext.tree.AsyncTreeNode({            text:'我是根',            children:[{                text:'01',qtip:'我是鼠标提示',//如果有qtip属性,则必须要有Ext.QuickTips.init()这句话                children:[{                    text:'01-01',                    leaf:true   //这里为true代表他下面已经没有子节点,不需要加载出来                },{                    text:'01-02',                    children:[{                        text:'01-02-01',                        leaf:true                    },{                        text:'01-02-02',                        leaf:true                    }]                },{                    text:'01-03',                    leaf:true,                    href:"http://www.baidu.com",//通过点击节点,可以链接到一个地址                    hrefTarget:'_blank'                   }]            },            {                text:'02',                leaf:true,                icon:'user_female.png'  //自定义节点的图标            }]        });        tree.setRootNode(root);        tree.render();                tree.on('dblclick',function(node){            Ext.Msg.alert('您刚刚双击了',node.text);        });                //右键菜单        var contextmenu = new Ext.menu.Menu({            id:'thecontextmenu',            items:[{                text:'选择',                 handler: function() {                                              alert('你选择的是=' + tree.getSelectionModel().getSelectedNode().text + " 结点");                      }            }]        });                //右键菜单显示        tree.on('contextmenu',function(node,e){             e.preventDefault();            node.select();//节点进入选中状态            contextmenu.showAt(e.getXY());        });                tree.on('click',function(node){            Ext.Msg.show({                title:'提示',                msg:'您点击了:'+node,                animEl:node.ui.textNode            });        });                root.expand();        Ext.QuickTips.init(); //初始化接点提示        tree.expandAll();//展开所有节点    });    </script>
分享到:
评论

相关推荐

    EXT tree 使用 实例 最新

    EXT Tree 是一个强大的JavaScript组件,它是EXT JS框架的一部分,用于构建可交互的树形数据结构。EXT Tree在网页中常用于展示层次结构的数据,如文件系统、组织结构或导航菜单等。EXT Tree提供了丰富的功能,包括...

    ext TREE

    【标题】"ext TREE"指的是在软件开发领域中,尤其是Java Web开发中,EXT JS库中的Tree组件。EXT JS是一个强大的JavaScript用户界面库,用于构建富客户端应用。Tree组件是EXT JS中的一个重要部分,它允许开发者创建可...

    Ext Tree示例

    Ext Tree 是 Ext JS 库中的一个组件,它用于在用户界面上展示层次化的数据结构,类似于文件系统的目录结构。在给定的资源中,我们有多个 HTML 文件(tree2.html, tres.html, s1.html, tree.html)和 JavaScript 文件...

    oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree

    标题中的"oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree"似乎是一个组合字符串,它可能代表了某个项目或教程的文件结构。其中,“oa”可能是项目或系统的名称,而“ext”、“java”、“oa_ext”、“tree_...

    EXT Tree的简单实践

    6. **代码实践**:`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中,开发者可能定义了一个 TreePanel,并设置了相应的配置项,加载了数据,注册了事件处理器。通过阅读和分析这个文件,可以深入...

    Ext tree json 动态加载完美实例

    在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...

    extTree例子点击出现等

    ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...

    EXT TREE 扩展CHECKBOX JS

    EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...

    EXT tree学习 参考

    EXT Tree是EXT JS库中的一个组件,用于在Web应用程序中展示层次结构的数据。EXT JS是一个强大的JavaScript UI框架,提供了一系列的可复用组件,EXT Tree就是其中之一,它可以帮助开发者构建功能丰富的树形视图,常...

    Ext tree json Demo

    Ext Tree JSON Demo是一个基于ExtJS库实现的异步加载树形结构的示例项目。ExtJS是一个强大的JavaScript UI框架,广泛用于构建富客户端应用程序。在本项目中,它被用来展示如何利用JSON数据来动态加载树节点,提高...

    ext tree grid 的高级实例运用

    在EXT JS这个强大的JavaScript框架中,`Tree`和`Grid`是两个非常重要的组件,用于构建数据密集型的用户界面。在"ext tree grid 的高级实例运用"中,我们将深入探讨如何有效地结合这两个组件,实现复杂的交互功能。...

    ext tree json 例子(不含EXT包)

    "ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...

    Ext tree 结合dwr 调用后台数据

    "Ext tree 结合dwr 调用后台数据"这个主题涉及到两个关键的技术:Ext JS的Tree组件和Direct Web Remoting (DWR)。这两个技术的结合使得前端用户界面能够动态地展示并操作后台的数据。 首先,让我们来了解一下**Ext ...

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...

    符合Ext tree的全国城市列表json格式

    标题中的“符合Ext tree的全国城市列表json格式”指的是使用Ext JS库构建的树形结构数据,这种数据格式常用于展示具有层级关系的数据,如行政区域划分。Ext JS是一个强大的JavaScript框架,它提供了丰富的组件库,...

    Ext Tree 3.2.1

    Ext Tree 3.2.1 是一个用于构建交互式树形结构的JavaScript库,它是Ext JS框架的一个组件。Ext JS是一个强大的客户端JavaScript库,用于创建富互联网应用程序(RIA)。在这个3.2.1版本中,它包含了完整的源代码、...

    ext grid tree 应用

    在EXT JS框架中,"ext grid tree 应用"是一个常见的功能组合,它结合了Grid面板和Tree面板的优势,用于展示复杂的数据结构。Grid通常用于显示二维表格数据,而Tree则用于展示层次化的数据。在这个例子中,开发者通过...

    EXT TreeFilter 插件

    EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...

    Ext tree build

    标题“Ext tree build”指的是在Ext JS框架中构建树形结构的过程。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,其中包括用于显示层次数据的树形控件(Tree)。在本篇文章...

    Ext 带多选的Tree

    在EXT JS这个强大的JavaScript库中,Tree组件是一个用于展示层级数据的重要工具。"Ext 带多选的Tree"指的是在EXT JS的Tree组件中集成了多选功能,允许用户通过复选框来选择多个树节点,从而实现批量操作或者进行多级...

Global site tag (gtag.js) - Google Analytics