`
jiangnan2112
  • 浏览: 122235 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

EXT tree 树入门学习

EXT 
阅读更多
学习EXT中tree的入门笔记。 
EXT代码：
Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({el:'test'});            //建造树    test与页面div的id对应  el 为EL，而不是E一
    var root = new Ext.tree.TreeNode({text:'我是祖先'});        //根节点
    var node1 = new Ext.tree.TreeNode({text:'我是爷爷'});
    var node2 = new Ext.tree.TreeNode({text:'我是爷爷的兄弟'});
    var node3 = new Ext.tree.TreeNode({text:'我是父亲'});    
    var node4 = new Ext.tree.TreeNode({text:'我是孙子'});    
    node3.appendChild(node4);        //添加相应的子节点
    root.appendChild(node1); 
    node1.appendChild(node3);
    root.appendChild(node2);   
    tree.setRootNode(root);         //设置根节点
    tree.render();
   root.expand(true,true);        //是否自动展开，不需要点击子节点
});


页面代码：
    <body>
        <div id="test" style="height:300px;"></div>
        //一定要设置高度，要然看不到效果 style="height:300px"
    </body>


效果如下：

  • 大小: 8 KB
分享到：
| SVN Commit 提交失败
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext Tree示例

    总的来说，这些资源提供了学习和实践 Ext Tree 的基础。通过查看和运行这些示例，我们可以了解到如何初始化 Ext Tree，如何配置加载数据的方式，如何处理用户交互，以及如何自定义节点的行为。对于开发人员来说，...

    ext tree grid 的高级实例运用

    通过阅读并实践这个"ext-test-html"中的示例代码，开发者可以学习到如何配置`Tree`和`Grid`的事件监听器，以响应用户的交互操作，以及如何编写后台数据处理逻辑来配合前端的显示。此外，还会了解到EXT JS中的模型...

    Ext树例子

    首先，让我们了解Ext树的基础。Ext树的核心组件是`Ext.tree.Panel`，它继承自`Ext.container.Container`。这个面板包含了树的所有节点，并提供了一种可交互的方式来显示和操作这些节点。树的每个节点通常由`Ext.tree...

    Ext下拉树、下拉表格

    在本项目中，"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件：下拉树（ComboBox with Tree）和下拉表格（ComboBox with Grid）。这两种组件都是在输入框中展示可选择的列表，但呈现形式不同，下拉树以...

    ExtJsByZheng.rar_ExtJsByZheng_ext_ext 标签_ext tree_grid

    Ext基本使用入门例子：包括布局，窗口，Tab，Tree，grid等，后台使用Servlet。可以直接在MyEclipse6中运行。

    简单的ext树

    在本案例中，“简单的ext树”是一个为初学者设计的基础教程，旨在帮助那些刚开始接触Ext JS的人快速理解和创建基本的树形视图。 1. **Ext JS入门**： 在开始使用Ext JS创建树形结构之前，首先要理解其基本概念和...

    ext生成树节点带链接

    var tree = new Ext.tree.TreePanel({ el: 'tree', title: '控制面板', useArrows: true, autoScroll: true, animatr: true, rootVisible: true, useArrows: true, frame: true, loader: new Ext.tree....

    如何使用ext写的树形菜单

    在EXT中，实现树形菜单主要依赖于`Ext.tree.Panel`组件，这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素，通常用于表示文件系统、组织结构或导航菜单。在EXT中，`...

    根据输入的关键字过滤ext树节点

    1. **创建树组件**：首先，我们需要创建一个Ext.tree.Panel实例，它是树视图的基础。配置项包括store（数据源）、rootVisible（是否显示根节点）等。 ```javascript var treePanel = Ext.create('Ext.tree.Panel', ...

    js+ext超炫树形控件

    2. **树形控件基础**：树形控件在ExtJS中被称为`Ext.tree.Panel`，它允许用户展开和折叠节点，进行多级深度的浏览。每个节点可以包含任意数量的子节点，并且可以通过图标、文本以及自定义操作来区分。 3. **API ...

    treepanel实例

    在Web开发中，Ext JS是一个强大的JavaScript库，它提供了丰富的用户界面组件，其中Tree Panel是用于展示树形结构数据的重要组件。本文将深入讲解`Treepanel`的使用，包括其基本概念、配置选项、事件处理以及与后台...

    Ext用户扩展控件-------支持树上多个节点和叶子的拖动

    在树控件中实现拖放功能，需要对`Ext.tree.TreeViewDragDrop`或`Ext.tree.TreeDragZone`类进行扩展。这个特定的用户扩展控件，即"UxMutiDragDropTree"，则是在原有基础上增加了多选和多节点拖放的能力。 多选功能...

    ext2的可编辑树

    EXT文件系统家族是Linux系统中最常见的默认文件系统，每个版本都在前一个的基础上进行了改进和增强，如EXT3引入了日志记录功能，EXT4则进一步优化了性能和扩展性。 【压缩包子文件的文件名称列表】：tree1.jsp、js ...

    Ext 开发指南 学习资料

    9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧！...

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

    var treePanel = Ext.create('Ext.tree.Panel', { title: 'Tree Demo', width: 300, height: 300, store: treeStore, // 这里需要定义store来连接数据 rootVisible: true, renderTo: Ext.getBody() }); ```...

    Ext类似于flex树插件及调用demo

    通过学习EXTJS TreePanel的基础知识，理解Flex树与EXTJS Tree的相似性，以及如何开发和调用自定义插件，我们可以创建出类似"TreeDemo"这样效果绚丽、可拖曳的树形组件。对于深入理解和应用EXTJS，实践这样的例子是...

    使用ExtJs构建树形菜单功能

    在ExtJs中，树形菜单主要通过`Ext.tree.TreePanel`类来实现。该类继承自`Panel`面板，提供了许多特性和方法来方便地构建和操作树形结构。下面我们通过一个简单的例子来创建一棵基础的树： ```javascript Ext....

    editTreeGrid ext可编辑的treegridpanel

    除了EXT JS提供的基础功能，你还可以根据项目需求自定义扩展，例如添加验证规则、自定义编辑器类型，或者集成其他插件以增强用户体验。 8. **响应式设计** EXT JS的可编辑TreeGrid也支持响应式布局，可以根据不同...

    ext 资源汇总

    EXT.tree.Panel是树的基础，EXT.tree.View负责渲染节点，EXT.tree.NodeInterface定义了树节点的行为。EXT.tree.Column用于设置树节点列的显示，EXT.tree.LoadMask可以在加载数据时显示遮罩。 4. **独立文件和注释**...

Magicbox
Global site tag (gtag.js) - Google Analytics