`

【ExtJS】Tree加载JSON数据源

 
阅读更多
Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            url:'data.json'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Ext JS',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();
});

 

[{
        id: 1,
        text: 'A leaf Node',
        leaf: true
    },{
        id: 2,
        text: 'A folder Node',
        children: [{
            id: 3,
            text: 'A child Node',
            leaf: true
        }]
   }]

 

分享到:
评论

相关推荐

    Extjs Tree + JSON + Struts2 例子

    ExtJS 是一个流行的 JavaScript 框架,用于构建富客户端应用,它支持多种数据源,包括 JSON。Struts2 是一个 Java Web 开发框架,提供了 JSON 插件来方便地处理 JSON 数据。在尝试构建这个示例时,开发者遇到了数据...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree通过Ajax请求获取这些JSON数据,并根据数据构建或更新树结构。JSON的优势在于它的结构与JavaScript对象相似,可以直接在JavaScript中使用,减少了数据处理的复杂性。 3. **Struts2**: Struts2 是一个基于...

    extjs tree + json+struts2示例源代码

    本示例将详细介绍如何结合ExtJS的Tree组件、JSON数据格式以及Struts2框架,构建一个动态的树形结构展示系统。 首先,我们要理解ExtJS Tree组件。它是一种可扩展的树状视图,用于展示层次结构的数据。在ExtJS中,...

    Extjs Tree + JSON + Struts2

    在 `tree.js` 中,开发者可能定义了树的配置,包括节点数据源、节点渲染、事件处理等。 2. **JSON (JavaScript Object Notation)**: JSON 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成...

    动态加载extjs tree

    1. **TreeStore**: TreeStore是ExtJS Tree的数据源,负责管理树节点的数据。它可以配置为从服务器异步获取数据,通过`proxy`配置项来指定数据源类型,通常使用`ajax`或`restful`,并设置`url`属性指向服务器端接口。...

    Extjs的Tree和Tab使用json做tree数据交互

    总结,ExtJS的Tree和Tab组件结合JSON数据,可以创建出强大的用户界面,让用户能够以树形结构浏览数据,并通过选择节点在不同页面间切换。通过熟练掌握这些技术,开发者可以构建出功能丰富的Web应用程序。

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...

    extjs tree示例

    数据源通常是一个JSON对象或通过Ajax请求从服务器获取的数据。在创建TreePanel时,我们需要定义`rootNode`,它是树的根节点,以及`store`,用于存储和管理树节点的数据。 ```javascript var treeStore = Ext.create...

    extjs的tree的使用

    2. **加载数据**:接着,你可以通过Ajax请求或直接在代码中定义数据源来填充Tree组件。数据源可以是服务器返回的JSON格式数据,也可以是在客户端预先定义的静态数组。 3. **配置TreePanel**:使用`Ext.tree.Panel`...

    ExtJs4 Checkbox tree

    可以通过`store.load()`方法加载JSON数据,如`check-nodes.json`。数据加载后,TreePanel会自动构建树结构并显示复选框。 6. **事件处理**: Checkbox Tree支持多种事件,如`checkchange`,当用户改变节点的选中...

    extjs tree

    实际应用中,你需要根据项目需求调整数据源和样式。 总结一下,ExtJS Tree是一个强大且灵活的组件,它提供了丰富的功能和良好的用户体验,适用于展示和管理层级关系的数据。通过配置TreeStore、TreePanel以及相应的...

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

    在这个例子中,`TreePanel`使用`TreeStore`从`tree_data.json`加载数据,并且隐藏了根节点。 标签“源码”和“工具”暗示了这篇博客可能还讨论了EXTJS的源代码以及如何使用EXTJS作为开发工具来实现动态加载功能。...

    Extjs的tree

    ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...

    struts2与extjs tree的完美结合

    1. 创建ExtJS Tree,定义树的模型(model)和数据源(store),并设置监听事件,如节点加载事件。 2. 在服务器端,使用Struts2注解标记Action类和方法,指定响应的JSON结果。 3. 实现Action方法,根据请求参数查询...

    ExtJS Tree教程及例子代码

    3. **数据源**:节点数据通常存储在`TreeStore`中,它可以使用JSON或XML格式的远程数据,也可以是本地数组。异步加载(`async`配置项)允许按需加载子节点,提高性能。 4. **渲染与模板**:使用`displayField`配置...

    Extjs_Tree_JSON_ _Struts2_例子

    在本例中,开发者希望通过Extjs的Tree组件结合JSON数据格式来展示一种分层结构的信息。这种应用场景常见于文件管理、组织架构展示等需要展示层级关系的场景。 ### 2. Struts2框架的应用 #### 知识点概述: Struts2...

    extjs tree 节点 链接 新窗口

    而在`Ext.tree.TreeLoader`中,你只需要指定一个URL,TreeLoader会自动发送请求获取JSON数据,JSON数据的结构应该包含树节点的所有信息,如`text`、`children`等。例如: ```javascript var treeLoader = new Ext....

    extjs tree2

    - `Ext.data.TreeStore`作为数据源,负责处理数据加载和更新,它可以连接到服务器端进行异步数据获取。 6. **模板与渲染**: - 自定义模板可以改变节点的显示样式,例如添加图标、链接或其他HTML元素。 - `tpl`...

    Extjs 无限树菜单 后台拼接json

    我们需要配置数据源,通常是`store`,设置`proxy`为`ajax`类型,指定`url`为后端接口URL,用于获取JSON数据。 - 数据加载后,`tree.Panel`会自动解析JSON并渲染成可交互的树结构。每个节点可以配置点击事件,以便...

    ExtJS4.2 tree 级联选择

    总结一下,"ExtJS4.2 tree 级联选择"是通过ExtJS的TreePanel组件实现的,利用了`selModel`的级联选择功能,配合`check-tree.js`中的逻辑代码,读取`check-nodes.json`作为数据源,构建了一个具有交互式的树形选择器...

Global site tag (gtag.js) - Google Analytics