`
endual
  • 浏览: 3560866 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs4 tree

 
阅读更多

How To Use ExtJS 4 TreePanels with Both Static Data and Model Stores

by CLINT on SEPTEMBER 26, 2011

Wireframe showing tree with both static and dynamically-loaded items

I recently needed to build an “admin” screen for a webapp using ExtJS 4. The wireframe called for a tree to navigate the various admin settings, including settings for individual users (something like what you see at right). To build a tree like this with ExtJS, you usually use the Ext.tree.Panel class (a.k.a., a TreePanel). Unfortunately I couldn’t find any examples of how to make a TreePanel with a mixture of both static and dynamic nodes, so figuring it out took longer than it should have. With that in mind, I thought I’d share what I learned.

A working example of the solution I came up with is shown below (if the embedded version doesn’t appear for some reason, you can open it here). Note that you can actually run the code in your browser and see the results–just click the play button. Or if you’d like to modify it, click the “+” button to copy the code into your own project on JSFiddle.

 

The first thing the code does is define a basic model class for user data, called UserModel:

  1. Ext.define('demo.UserModel', {  
  2.     extend: 'Ext.data.Model',  
  3.     fields: ['id''name''profile_image_url']  
  4. });  

The next thing it does is set up a TreeStore to load the UserModel instances:

  1. var userTreeStore = Ext.create('Ext.data.TreeStore', {  
  2.   
  3.     model: 'demo.UserModel',  
  4.   
  5.     proxy: {  
  6.         type: 'jsonp'// Because it's a cross-domain request  
  7.   
  8.         url : 'https://api.twitter.com/1/lists/members.json?owner_screen_name=Sencha&slug=sencha-team&skip_status=true',  
  9.   
  10.         reader: {  
  11.             type: 'json',  
  12.             root: 'users' // The returned JSON will have array   
  13.                           // of users under a "users" property  
  14.         },  
  15.   
  16.         // Don't want proxy to include these params in request  
  17.         pageParam: undefined,  
  18.         startParam: undefined,  
  19.         pageParam: undefined,  
  20.         pageParam: undefined  
  21.     },  
  22.     ...  
  23. });  

Note that for this example we’ll be using Twitter as our data source for faux “users”; the UserModel fields are set up to match JSON from the Twitter API (specifically, people who are a member of the “Sencha Team” Twitter list) and we need to use a JSONP proxy to make cross-domain requests (i.e., the demo is hosted at jsfiddle.net but it’s connecting to api.twitter.com). Here’s an easy-to-read sample of what the data looks like:

The JSON user data we're getting from Twitter (edited for easier reading)

The next part requires a little more explanation. First, let’s look at the code:

  1. var userTreeStore = Ext.create('Ext.data.TreeStore', {  
  2.     model: 'demo.UserModel',  
  3.     ...      
  4.     listeners: {  
  5.           
  6.         // Each demo.UserModel instance will be automatically   
  7.         // decorated with methods/properties of Ext.data.NodeInterface   
  8.         // (i.e., a "node"). Whenever a UserModel node is appended  
  9.         // to the tree, this TreeStore will fire an "append" event.  
  10.         append: function( thisNode, newChildNode, index, eOpts ) {  
  11.               
  12.             // If the node that's being appended isn't a root node, then we can   
  13.             // assume it's one of our UserModel instances that's been "dressed   
  14.             // up" as a node  
  15.             if( !newChildNode.isRoot() ) {  
  16.                   
  17.                 // The node is a UserModel instance with NodeInterface  
  18.                 // properties and methods added. We want to customize those   
  19.                 // node properties  to control how it appears in the TreePanel.  
  20.                   
  21.                 // A user "item" shouldn't be expandable in the tree  
  22.                 newChildNode.set('leaf'true);  
  23.                   
  24.                 // Use the model's "name" value as the text for each tree item  
  25.                 newChildNode.set('text', newChildNode.get('name'));  
  26.                   
  27.                 // Use the model's profile url as the icon for each tree item  
  28.                 newChildNode.set('icon', newChildNode.get('profile_image_url'));  
  29.                 newChildNode.set('cls''demo-userNode');  
  30.                 newChildNode.set('iconCls''demo-userNodeIcon');  
  31.             }  
  32.         }  
  33.     }  
  34. });  
  35.   
  36. userTreeStore.setRootNode({  
  37.     text: 'Users',  
  38.     leaf: false,  
  39.     expanded: false // If this were true, the store would load itself   
  40.                     // immediately; we do NOT want that to happen  
  41. });  

This doesn’t look like a “normal” Ext.data.Store. For one thing, it has an “append” event handler that receives “nodes”–objects that have methods and properties from the Ext.data.NodeInterface class. Secondly, the store has a setRootNode() method that we’re calling with a config object for NodeInterface. What’s going on?

The important thing to understand here is that a TreeStore manages Ext.data.Model instances–just like any other Store–but it copies NodeInterface methods/properties into every model so that they can be linked together into a hierarchy (i.e., a tree). In this case, every instance of demo.UserModel now has NodeInterface properties like “leaf” and “text” (which indicate if the item should be expandable when it’s displayed in a TreePanel, and what text should be shown).

Next, understand that when we call setRootNode({...}), the TreeStore implicitly creates a generic Ext.data.Model instance for us, adds the NodeInterface method/properties, and then makes it the root node; when the UserModels are loaded, they will be added as “children” to this node. What we end up with is a TreeStore with models organized into a hierarchy, each one having properties that a TreePanel can use for displaying it:

The "userTreeStore" builds a data structure like this

The next thing the code does is create a separate TreeStore with some “static” nodes (again, using NodeInterface config properties).

  1. var settingsTreeStore = Ext.create('Ext.data.TreeStore', {  
  2.     root: {  
  3.         expanded: true,  
  4.         children: [  
  5.             {  
  6.                 text: 'Settings',  
  7.                 leaf: false,  
  8.                 expanded: true,  
  9.                 children: [  
  10.                     {  
  11.                         text: 'System Settings',  
  12.                         leaf: true  
  13.                     },  
  14.                     {  
  15.                         text: 'Appearance',  
  16.                         leaf: true  
  17.                     }   
  18.                 ]  
  19.             }  
  20.         ]  
  21.     }  
  22. });  

Finally, we get the root of our userTreeStore and append it as a child to the “static” TreeStore. Then it’s just a matter of creating the TreePanel.

  1. // Graft our userTreeStore into the settingsTreeStore. Note that the call  
  2. // to .expand() is what triggers the userTreeStore to load its data.  
  3. settingsTreeStore.getRootNode().appendChild(userTreeStore.getRootNode()).expand();  
  4.   
  5. Ext.create('Ext.tree.Panel', {  
  6.     id: 'usersTreePanel',  
  7.     title: 'Admin Control Panel',  
  8.     renderTo: Ext.getBody(),  
  9.     height: 300,  
  10.     width: 300,  
  11.     store: settingsTreeStore,  
  12.     rootVisible: false  
  13. });  

In other words, you can “graft” TreeStores onto other TreeStores–this is the key to creating tree panels with a mixture of different data sources and underlying Models. The prerequisite, however, is understanding the NodeInterface. Hopefully this post will help others learn how to get started with TreePanels and TreeStores more quickly.

分享到:
评论

相关推荐

    Extjs4 tree report

    标题“Extjs4 tree report”涉及的技术点主要集中在ExtJS 4框架的树形报表功能。ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件模型和强大的数据绑定机制。在ExtJS 4中,树形控件...

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    extjs的tree的使用

    4. **渲染Tree**:最后,调用`render`方法将Tree组件添加到DOM中指定的位置。 ### 核心配置选项 - **rootVisible**: 布尔值,表示是否显示根节点。 - **useArrows**: 布尔值,表示是否在节点旁边显示箭头,以便于...

    extjs4 treeGrid实例

    在ExtJS4中,TreeGrid主要由`Ext.tree.Panel`类定义,它扩展了`Ext.grid.Panel`,因此具备了表格的所有功能,同时也包含了树结构的特性。 创建一个TreeGrid的第一步是定义模型(Model)。模型定义了数据的字段及其...

    ExtJs_TreeDemo

    树形菜单(Tree)是ExtJs中的一个重要组件,它允许用户以层级结构展示数据,广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,...

    extjs ajax tree(js动态树,无需递归)

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构,它利用AJAX技术来异步加载节点数据,无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度,尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    ExtJS4.2 tree 级联选择

    4. `ttt.htm`文件应该是整个应用的HTML入口点,它可能包含了引入ExtJS库和自定义脚本的`<script>`标签,以及一个用于承载TreePanel的容器元素。 为了完整实现这个功能,还需要确保ExtJS库和必要的主题资源已经被...

    extjs-tree.zip_extjs tree

    ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    Extjs tree实例【源代码】

    ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...

    Extjs的tree

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

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

    在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...

    extjs tree

    ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式,它主要用于展示层级关系的数据,例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,提供了丰富的组件化功能和...

    extJs3升级extjs4方案

    ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout ...

    动态加载extjs tree

    4. **expand事件**: 当用户展开一个节点时,Tree会触发`expand`事件。在事件监听器中,可以调用TreeStore的`load`方法,传入需要加载的节点ID,向服务器发送请求获取子节点数据。 5. **load事件**: TreeStore的`...

    ExtJs Tree

    根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...

    Extjs4 Combox tree

    ExtJS4中的ComboxTree是一种将下拉列表与树形结构结合的组件,它扩展了标准的ComboBox,提供了更丰富的用户交互体验。这种组件在数据展示和选择时特别有用,尤其是在处理具有层级关系的数据时,比如部门结构、地区...

    extjs tree示例

    ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...

    extjs tree 异步加载树型

    ExtJS Tree 是一个基于 ExtJS 框架的组件,用于构建可交互的、层级结构的树形控件。在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在...

    Extjs tree+grid+form+panel 使用实例

    Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例

Global site tag (gtag.js) - Google Analytics