extjs学习四treePanel -

AbstractForever

浏览: 308036 次
性别:
来自: 成都

最近访客更多访客>>

piao2004

weich_java

2019ben123

sunshine2651

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

extjs学习四treePanel

博客分类：

EXT JavaScript CSS Cache HTML

树的使用是很频繁的，对树节点的各种操作。和数据库的互动操作。

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>树的展示</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>
</html>

forever.js是工具类：

Ext.ns("org.forever.util");

Ext.define('org.forever.util.TreeUtil', {
    extend: 'Object',
    userName: '默认值',//属性
    constructor: function(config){//构造函数
        Ext.apply(this, config);
    }
});
//递归更新节点的选中状态
org.forever.util.TreeUtil.updateCheckStatus = function(parentNode, checked){
    Ext.each(parentNode.childNodes, function(childNode, index, allItems){
        //Ext.Msg.alert('节点信息',node.get('text')+';index=' + index);
        childNode.set('checked', checked);
        org.forever.util.TreeUtil.updateCheckStatus(childNode, checked);
    });
}

tree-app.js是程序的初始化代码：

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是创建一个简单的树，对节点提取值进行操作。

function createSimpleTree(){
    var treeStore;
    var treePanel;
    var toolbarPanel;
    
    store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            text: "根节点",
            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
            }]
        }
    });
    //工具条面板
    toolbarPanel = new Ext.panel.Panel({
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: '选中节点值',
                handler: function(){
                    var selectionMode = treePanel.getSelectionModel();
                    var modeType = selectionMode.getSelectionMode();//SINGLE, MULTI or SIMPLE
                    var selection = selectionMode.getSelection();//获取选中的值
                    if (selection.length == 1) {
                        Ext.MessageBox.show({
                            title: '节点操作',
                            msg: "选中节点的值：" + selection[0].data.text,
                            icon: Ext.MessageBox.INFO
                        });
                    }
                    else {
                        Ext.MessageBox.show({
                            title: '节点操作',
                            msg: '没有选中的节点',
                            icon: Ext.MessageBox.INFO
                        });
                    }
                    
                }
            }]
        }]
    });
    
    //树面板
    treePanel = Ext.create('Ext.tree.Panel', {
        title: 'simple-tree',
        store: store,
        closable: true,
        rootVisible: true,//显示根节点
        dockedItems: [toolbarPanel],
        listeners: {
            itemclick: function(view, record, item, index, e){//用了select这个事件不会触发。
                Ext.MessageBox.show({
                    title: '节点操作',
                    msg: 'itemclick：index=' + index + ",text=" + record.data.text,
                    icon: Ext.MessageBox.INFO
                });
            }
        }
        //renderTo: 'simple-tree-div'//<div id="simple-tree-div"></div>
    });
    //注册事件操作
    treePanel.getSelectionModel().on('select', function(selModel, record){
        Ext.MessageBox.show({
            title: '节点操作',
            msg: 'select：modeType=' + selModel.mode + ",text=" + record.data.text,
            icon: Ext.MessageBox.INFO
        });
    });
    return treePanel;
}

tree-check.js是带复选框的树，提取选中的树的值：

function createCheckTree(){
    var treeStore;
    var treePanel;
    var toolbarPanel;
    
    store = Ext.create('Ext.data.TreeStore', {
        root: {
            checked: false,
            expanded: true,
            text: "根节点",
            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: '选中节点值',
                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: '节点操作',
                            msg: '没有选中的节点',
                            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;
}