JavaScript DHTML/Ext JS/Tree

Содержание

1 Check Tree
2 Column tree
3 Drop anything into the tree
4 Two trees

Check Tree

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
 
--> 
<!-- Revised from Ext JS Library 3.0.0 --> 
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:"tree-div",
        title: "My Task List",
        height: 300,
        width: 400,
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        frame: true,
        root: {
            nodeType: "async"
        },
        
        // auto create TreeLoader
        dataUrl: "ext-3.0.0/examples/tree/check-nodes.json",
        
        listeners: {
            "checkchange": function(node, checked){
                if(checked){
                    node.getUI().addClass("complete");
                }else{
                    node.getUI().removeClass("complete");
                }
            }
        },
        
        buttons: [{
            text: "Get Completed Tasks",
            handler: function(){
                var msg = "", selNodes = tree.getChecked();
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ", ";
                    }
                    msg += node.text;
                });
                Ext.Msg.show({
                    title: "Completed Tasks", 
                    msg: msg.length > 0 ? msg : "None",
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
    });
    tree.getRootNode().expand(true);
});
</script>
</head>
<body>
<div id="tree-div"></div>
</body>
</html>

Column tree

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
 
--> 
<!-- Revised from Ext JS Library 3.0.0 --> 
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/ColumnNodeUI.css" />
    <script type="text/javascript" src="ext-3.0.0/examples/ux/ColumnNodeUI.js"></script>
<script>
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    var tree = new Ext.ux.tree.ColumnTree({
        width: 550,
        height: 300,
        rootVisible:false,
        autoScroll:true,
        title: "Example Tasks",
        renderTo: Ext.getBody(),
        columns:[{
            header:"Task",
            width:330,
            dataIndex:"task"
        },{
            header:"Duration",
            width:100,
            dataIndex:"duration"
        },{
            header:"Assigned To",
            width:100,
            dataIndex:"user"
        }],
        loader: new Ext.tree.TreeLoader({
            dataUrl:"ext-3.0.0/examples/tree/column-data.json",
            uiProviders:{
                "col": Ext.ux.tree.ColumnNodeUI
            }
        }),
        root: new Ext.tree.AsyncTreeNode({
            text:"Tasks"
        })
    });
});
</script>
</head>
<body>
    <h1>ColumnTree Example</h1>

</body>
</html>

Drop anything into the tree

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/DataView-more.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // Album toolbar
    var newIndex = 3;
    var tb = new Ext.Toolbar({
        items:[{
            text: "New Album",
            iconCls: "album-btn",
            handler: function(){
                var node = root.appendChild(new Ext.tree.TreeNode({
                    text:"Album " + (++newIndex),
                    cls:"album-node",
                    allowDrag:false
                }));
                tree.getSelectionModel().select(node);
                setTimeout(function(){
                    ge.editNode = node;
                    ge.startEdit(node.ui.textNode);
                }, 10);
            }
        }]
    });
    // set up the Album tree
    var tree = new Ext.tree.TreePanel({
         // tree
         animate:true,
         enableDD:true,
         containerScroll: true,
         ddGroup: "organizerDD",
         rootVisible:false,
         // layout
         region:"west",
         width:200,
         split:true,
         // panel
         title:"My Albums",
         autoScroll:true,
         tbar: tb,
         margins: "5 0 5 5"
    });
    var root = new Ext.tree.TreeNode({
        text: "Albums",
        allowDrag:false,
        allowDrop:false
    });
    tree.setRootNode(root);
    root.appendChild(
        new Ext.tree.TreeNode({text:"Album 1", cls:"album-node", allowDrag:false}),
        new Ext.tree.TreeNode({text:"Album 2", cls:"album-node", allowDrag:false}),
        new Ext.tree.TreeNode({text:"Album 3", cls:"album-node", allowDrag:false})
    );
    // add an inline editor for the nodes
    var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
        allowBlank:false,
        blankText:"A name is required",
        selectOnFocus:true
    });
    // Set up images view
    var view = new Ext.DataView({
        itemSelector: "div.thumb-wrap",
        style:"overflow:auto",
        multiSelect: true,
        plugins: new Ext.DataView.DragSelector({dragSafe:true}),
        store: new Ext.data.JsonStore({
            url: "../view/get-images.php",
            autoLoad: true,
            root: "images",
            id:"name",
            fields:[
                "name", "url",
                {name: "shortName", mapping: "name", convert: shortName}
            ]
        }),
        tpl: new Ext.XTemplate(
            "<tpl for=".">",
            "<div class="thumb-wrap" id="{name}">",
            "<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>",
            "<span>{shortName}</span></div>",
            "</tpl>"
        )
    });
    var images = new Ext.Panel({
        id:"images",
        title:"My Images",
        region:"center",
        margins: "5 5 5 0",
        layout:"fit",
        
        items: view
    });
    var layout = new Ext.Panel({
        layout: "border",
        width:650,
        height:400,
        items: [tree, images]
    });
    layout.render("layout");
    var dragZone = new ImageDragZone(view, {containerScroll:true,
        ddGroup: "organizerDD"});
});

/**
 * Create a DragZone instance for our JsonView
 */
ImageDragZone = function(view, config){
    this.view = view;
    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
    // We don"t want to register our image elements, so let"s 
    // override the default registry lookup to fetch the image 
    // from the event instead
    getDragData : function(e){
        var target = e.getTarget(".thumb-wrap");
        if(target){
            var view = this.view;
            if(!view.isSelected(target)){
                view.onClick(e);
            }
            var selNodes = view.getSelectedNodes();
            var dragData = {
                nodes: selNodes
            };
            if(selNodes.length == 1){
                dragData.ddel = target;
                dragData.single = true;
            }else{
                var div = document.createElement("div"); // create the multi element drag "ghost"
                div.className = "multi-proxy";
                for(var i = 0, len = selNodes.length; i < len; i++){
                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                    if((i+1) % 3 == 0){
                        div.appendChild(document.createElement("br"));
                    }
                }
                var count = document.createElement("div"); // selected image count
                count.innerHTML = i + " images selected";
                div.appendChild(count);
                
                dragData.ddel = div;
                dragData.multi = true;
            }
            return dragData;
        }
        return false;
    },
    // this method is called by the TreeDropZone after a node drop
    // to get the new tree node (there are also other way, but this is easiest)
    getTreeNode : function(){
        var treeNodes = [];
        var nodeData = this.view.getRecords(this.dragData.nodes);
        for(var i = 0, len = nodeData.length; i < len; i++){
            var data = nodeData[i].data;
            treeNodes.push(new Ext.tree.TreeNode({
                text: data.name,
                icon: "../view/"+data.url,
                data: data,
                leaf:true,
                cls: "image-node"
            }));
        }
        return treeNodes;
    },
    
    // the default action is to "highlight" after a bad drop
    // but since an image can"t be highlighted, let"s frame it 
    afterRepair:function(){
        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
            Ext.fly(this.dragData.nodes[i]).frame("#8db2e3", 1);
        }
        this.dragging = false;    
    },
    
    // override the default repairXY with one offset for the margins and padding
    getRepairXY : function(e){
        if(!this.dragData.multi){
            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy[0]+=3;xy[1]+=3;
            return xy;
        }
        return false;
    }
});
// Utility functions
function shortName(name){
    if(name.length > 15){
        return name.substr(0, 12) + "...";
    }
    return name;
};
</script>
<div id="layout"></div>
</body>
</html>

Two trees

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
 
--> 
<!-- Revised from Ext JS Library 3.0.0 --> 
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script>
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
var TreeTest = function(){
    // shorthand
    var Tree = Ext.tree;
    
    return {
        init : function(){
            // yui-ext tree
            var tree = new Tree.TreePanel({
                animate:true, 
                autoScroll:true,
                loader: new Tree.TreeLoader({dataUrl:"get-nodes.php"}),
                enableDD:true,
                containerScroll: true,
                border: false,
                dropConfig: {appendOnly:true}
            });
            
            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree, {folderSort:true});
            
            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: "Ext JS", 
                draggable:false, // disable root node dragging
                id:"src"
            });
            tree.setRootNode(root);
            
            // render the tree
            tree.render("tree");
            
            root.expand(false, /*no anim*/ false);
            
            //-------------------------------------------------------------
            
            // YUI tree            
            var tree2 = new Tree.TreePanel({
                animate:true,
                autoScroll:true,
                //rootVisible: false,
                loader: new Ext.tree.TreeLoader({
                    dataUrl:"get-nodes.php",
                    baseParams: {lib:"yui"} // custom http params
                }),
                containerScroll: true,
                border: false,
                enableDD:true,
                dropConfig: {appendOnly:true}
            });
            
            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree2, {folderSort:true});
            
            // add the root node
            var root2 = new Tree.AsyncTreeNode({
                text: "My Files", 
                draggable:false, 
                id:"yui"
            });
            tree2.setRootNode(root2);
            tree2.render("tree2");
            
            root2.expand(false, /*no anim*/ false);
        }
    };
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
</script>
</head>
<body>
</body>

JavaScript DHTML/Ext JS/Tree

Содержание

Check Tree

Column tree

Drop anything into the tree

Two trees

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты