`

extjs studies four treePanel

    博客分类：
  • EXT
 
阅读更多
The use of the tree is very frequent, the various operations on the tree node. And database interactivity.
tree.html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <title> Tree display </title>
        <!-- Ext -->
        <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext4/bootstrap.js">
        </script>
        <script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js">
        </script>
        <!-- tree.jsp page -->
        <link rel="stylesheet" type="text/css" href="ext4/ux/css/TabScrollerMenu.css" />
        <script type="text/javascript" src="forever.js">
        </script>
        <script type="text/javascript" src="tree-simple.js">
        </script>
        <script type="text/javascript" src="tree-check.js">
        </script>
        <script type="text/javascript" src="tree-app.js">
        </script>
    </head>
    <body>
    </body>


forever.js are tools: 
Ext.ns("org.forever.util");

Ext.define('org.forever.util.TreeUtil', {
    extend: 'Object',
    userName: ' Default ',//property
    constructor: function(config){// Constructor
        Ext.apply(this, config);
    }
});
// Recursive update node selected
org.forever.util.TreeUtil.updateCheckStatus = function(parentNode, checked){
    Ext.each(parentNode.childNodes, function(childNode, index, allItems){
        //Ext.Msg.alert(' Node information ',node.get('text')+';index=' + index);
        childNode.set('checked', checked);
        org.forever.util.TreeUtil.updateCheckStatus(childNode, checked);
    });
}


tree-app.js is the process initialization code: 
Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext4/ux/');
Ext.onReady(function(){
    var tabscrollermenu = Ext.create('Ext.ux.TabScrollerMenu', {
        ptype: 'tabscrollermenu',
        maxText: 15,
        pageSize: 10
    });
    var simpleTreePanel = createSimpleTree();
    var checkTreePanel = createCheckTree();
    var tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 1,
        plugins: [tabscrollermenu],
        items: [simpleTreePanel, checkTreePanel]
    });

    Ext.create('Ext.Window', {
        title: 'tree app',
        width: 500,
        height: 400,
        x: 100,
        y: 100,
        bodyStyle: 'padding: 5px;',
        layout: 'border',
        items: [tabPanel]
    }).show();
});


tree-simple.js is to create a simple tree, extract the value of the node operation. 
function createSimpleTree(){
    var treeStore;
    var treePanel;
    var toolbarPanel;

    store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            text: " The root node ",
            children: [{
                text: "1-1",
                leaf: true
            }, {
                text: "1-2",
                expanded: true,
                children: [{
                    text: "2-1",
                    leaf: true
                }, {
                    text: "2-2",
                    leaf: true
                }]
            }, {
                text: "1-3",
                leaf: true
            }]
        }
    });
    // Tool Panel
    toolbarPanel = new Ext.panel.Panel({
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: ' Selected node value ',
                handler: function(){
                    var selectionMode = treePanel.getSelectionModel();
                    var modeType = selectionMode.getSelectionMode();//SINGLE, MULTI or SIMPLE
                    var selection = selectionMode.getSelection();// Gets the selected values
                    if (selection.length == 1) {
                        Ext.MessageBox.show({
                            title: ' Node actions ',
                            msg: " Value of the selected node :" + selection[0].data.text,
                            icon: Ext.MessageBox.INFO
                        });
                    }
                    else {
                        Ext.MessageBox.show({
                            title: ' Node actions ',
                            msg: ' The node is not selected ',
                            icon: Ext.MessageBox.INFO
                        });
                    }

                }
            }]
        }]
    });

    // Tree Panel
    treePanel = Ext.create('Ext.tree.Panel', {
        title: 'simple-tree',
        store: store,
        closable: true,
        rootVisible: true,// Display the root node
        dockedItems: [toolbarPanel],
        listeners: {
            itemclick: function(view, record, item, index, e){// In the select the event does not fire .
                Ext.MessageBox.show({
                    title: ' Node actions ',
                    msg: 'itemclick:index=' + index + ",text=" + record.data.text,
                    icon: Ext.MessageBox.INFO
                });
            }
        }
        //renderTo: 'simple-tree-div'//<div></div>
    });
    // Register event actions
    treePanel.getSelectionModel().on('select', function(selModel, record){
        Ext.MessageBox.show({
            title: ' Node actions ',
            msg: 'select:modeType=' + selModel.mode + ",text=" + record.data.text,
            icon: Ext.MessageBox.INFO
        });
    });
    return treePanel;
}


tree-check.js is a tree with a check box to extract the value of the selected tree: 
function createCheckTree(){
    var treeStore;
    var treePanel;
    var toolbarPanel;

    store = Ext.create('Ext.data.TreeStore', {
        root: {
            checked: false,
            expanded: true,
            text: " The root node ",
            children: [{
                checked: false,
                text: "1-1",
                leaf: true
            }, {
                checked: false,
                text: "1-2",
                expanded: true,
                children: [{
                    checked: false,
                    text: "2-1",
                    leaf: true
                }, {
                    checked: false,
                    text: "2-2",
                    children: [{
                        checked: false,
                        text: "2-2-1",
                        leaf: true
                    }, {
                        checked: false,
                        text: "2-2-2",
                        leaf: true
                    }]
                }]
            }, {
                checked: false,
                text: "1-3",
                leaf: true
            }]
        }
    });

    toolbarPanel = new Ext.panel.Panel({
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: ' Selected node value ',
                handler: function(target, e){
                    var records = treePanel.getView().getChecked(), names = [];
                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('text'));
                    });
                    if (records.length > 0) {
                        Ext.MessageBox.show({
                            title: 'Selected Nodes',
                            msg: names.join('<br />'),
                            icon: Ext.MessageBox.INFO
                        });
                    }
                    else {
                        Ext.MessageBox.show({
                            title: ' Node actions ',
                            msg: ' The node is not selected ',
                            icon: Ext.MessageBox.INFO
                        });
                    }

                }
            }]
        }]
    });

    treePanel = Ext.create('Ext.tree.Panel', {
        title: 'check-tree',
        store: store,
        animate: true,
        closable: true,
        rootVisible: true,
        dockedItems: [toolbarPanel],
        listeners: {
            itemclick: function(view, record, item, index, e){

            },
            checkchange: function(node, checked){
                org.forever.util.TreeUtil.updateCheckStatus(node, checked);
            }
        }
    });
    return treePanel;
}


分享到：
| extjs4.0----Grid To Grid拖拽示例
评论
发表评论

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

相关推荐

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中，我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板（Collapsible Panel）功能的树形视图（TreePanel），以及与之联动的选项卡（TabPanel）。这个设计允许...

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

    在本篇文章中，我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中（checked）的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例，结构如下： 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    ExtJS4 treepanel与girdpanel简单案例（包括MVC模式与非MVC模式）

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式：需要在引入js文件夹中的main.js文件 mvc开发模式：需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    ExtJS_TreePanel_树的配置详细属性

    主要方法： collapseAll()：收缩所有树节点 expandAll()：展开所有树节点 getRootNode()：获取根节点 getNodeById(String id)：获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    extjs4 treepanel动态改变行高度示例

    在本文中，我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件，它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...

    Extjs入门教程（treePanel和GridPanel）

    TreePanel是ExtJS中的一个树形控件，它允许你展示层级结构的数据。在教程中，你可能会学到如何创建和配置TreePanel，包括加载数据、设置节点图标、处理节点的展开和折叠事件，以及添加拖放功能。TreePanel通常用于...

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

    在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在EXTJS开发中，TreePanel是用于展示层级结构数据的组件，它经常被用来构建文件系统或者组织结构等。在处理TreePanel时，我们可能会遇到一个常见问题：当尝试使用MultiSelectionModel（多选模型）重置选中的节点时，...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件，它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法，使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明： 1. **主要...

    无废话ExtJs 系列教程十五[树：TreePanel]

    《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...

    ExtJs动态生成treepanel的Json格式

    在ExtJS中，TreePanel是一个组件，用于展示数据的层次结构，类似于文件系统的目录结构。动态生成TreePanel的JSON格式是构建可交互树形结构的关键步骤，特别是当数据需要根据用户操作或服务器响应实时更新时。 在...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息，我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点： ### 1. 创建TreeStore实例 ...

    extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    TreePanel 是 ExtJS 中用于展示树形结构数据的组件，而 CheckBox 是复选框，用于在界面上提供一个多选的选项。在 ExtJS 中，TreePanel 与 CheckBox 结合使用是一种常见的场景，其中的 CheckBox 可以用来控制树节点的...

    EXTJS实例 EXTJS树，可以编辑的EXTJS，EXTJS3.0

    在EXTJS3.0中，树形组件（TreePanel）提供了丰富的可编辑性，允许用户不仅查看数据，还能直接编辑节点内容。这大大增强了用户体验，使得交互性更强。编辑功能通常包括添加新节点、删除现有节点、修改节点文本以及...

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